axios 调用使用Azure API管理打包的第三方API时CORS被阻止

qacovj5a  于 2023-11-18  发布在  iOS
关注(0)|答案(1)|浏览(158)

我有一个问题,一直困扰我近1个月。我会诚实,我不是前端开发人员。所以这里的问题。
我有一个Azure API管理,它 Package 了第三方Map提供程序。该APIM由React.js + Axios开发的前端使用。每次前端调用 Package 了Azure APIM的API时,都会导致详细信息的错误:
x1c 0d1x的数据




CORS策略已阻止访问位于 [APIM URL] 从源 [FE ORIGIN] 的XMLHttpRequest:所请求的资源上不存在“控制-允许-源”标头。
以下是我在all操作上实现的Azure APIM策略:

<policies>
    <inbound>
        <base />
        <cors allow-credentials="false">
            <allowed-origins>
                <origin>[FE ORIGIN]</origin>
                <origin>http://localhost:3000/</origin>
                <origin>http://localhost:3001/</origin>
            </allowed-origins>
            <allowed-methods preflight-result-max-age="300">
                <method>GET</method>
                <method>POST</method>
                <method>DELETE</method>
                <method>OPTIONS</method>
                <method>PUT</method>
            </allowed-methods>
            <allowed-headers>
                <header>content-type</header>
                <header>accept</header>
                <header>transactionId</header>
                <header>authorization</header>
                <header>userId</header>
                <header>oid</header>
                <header>userRoles</header>
            </allowed-headers>
        </cors>
    </inbound>
    <backend>
        <base />
    </backend>
    <outbound>
        <base />
        <set-header name="Access-Control-Allow-Origin" exists-action="override">
            <value>@(context.Request.Headers.GetValueOrDefault("Origin",""))</value>
        </set-header>
        <set-header name="Access-Control-Allow-Credentials" exists-action="override">
            <value>false</value>
        </set-header>
    </outbound>
    <on-error>
        <base />
    </on-error>
</policies>

字符串
下面是Axios代码的一部分:

const handleSearch = useMemo(() => {
    const searchHandler = (value: string) => {
      if (value.length >= DELAY_CHAR) {
        const searchUrl = `${BASE_URL}?q=${value}&at=-0.789275,113.921327&limit=${MAX_ROW}`;
        axios
          .get(searchUrl)
          .then((res) => {
            const { items } = res.data;
            if (items && items.length > 0) {
              const opts: Opts[] = [];
              items.forEach((r) => {
                opts.push({
                  position: r.position,
                  value: r.address.label,
                });
              });
              setOptions(opts);
            }
          })
          .catch(() => {
            return null;
          });
      }
    };
  
    return debounce(searchHandler, DELAY_IN_MS);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [DELAY_IN_MS]);


我已经尝试了许多选项,甚至在新创建的API中 Package 第三方API。所以我的任何帮助对我来说都意义重大。非常感谢您之前,我希望信息足够。

8tntrjer

8tntrjer1#

所以,经过几个小时的尝试和错误,我们终于找到了根本原因。注意<inbound>部件上的<base />,我们删除了该部件和viola,它成功了。老实说,我不明白为什么,但它解决了这个问题。下面是最终的入站策略:

<policies>
<inbound>
    <!--<base />-->
    <cors allow-credentials="false">
        <allowed-origins>
            <origin>[FE ORIGIN]</origin>
            <origin>http://localhost:3000/</origin>
            <origin>http://localhost:3001/</origin>
        </allowed-origins>
        <allowed-methods preflight-result-max-age="300">
            <method>GET</method>
            <method>POST</method>
            <method>DELETE</method>
            <method>OPTIONS</method>
            <method>PUT</method>
        </allowed-methods>
        <allowed-headers>
            <header>content-type</header>
            <header>accept</header>
            <header>transactionId</header>
            <header>authorization</header>
            <header>userId</header>
            <header>oid</header>
            <header>userRoles</header>
        </allowed-headers>
    </cors>
</inbound>
<backend>
    <base />
</backend>
<outbound>
    <base />
    <set-header name="Access-Control-Allow-Origin" exists-action="override">
        <value>@(context.Request.Headers.GetValueOrDefault("Origin",""))</value>
    </set-header>
    <set-header name="Access-Control-Allow-Credentials" exists-action="override">
        <value>false</value>
    </set-header>
</outbound>
<on-error>
    <base />
</on-error>
</policies>

字符串

相关问题