Vuex Axios CORS 阻止访问控制允许来源

Posted 2023-03-04

【中文标题】Vuex Axios CORS 阻止访问控制允许来源

【英文标题】：Vuex Axios CORS Block Acess-control-allow-origin

【发布时间】：2020-04-18 11:27:27

【问题描述】：

这是错误：

所以，我确保我的后端 API 发送 acess-control-allow-origin 标头：

这是我的axios 代码：

     loadTopSales ( commit ) 
       axios
         .get('http://tms.test/api/top-sales', 
           headers: 
             'Access-Control-Allow-Origin': '*',
             Accept: 'application/json',
         Authorization: 'Bearer ' + this.state.token,
             withCredentials: true
           
         )
         .then(items => 
           commit('SET_TOP_SALES', items)
           console.log(items)
         )
         .catch(err => 
           console.log(err)
         )
     

请帮帮我。我已经尝试过***中的每个问题

查看curl -v -x options

我的后端设置标题

 public function handle($request, Closure $next)
    
        $headers = [
            'Access-Control-Allow-Origin' => '*',
            'Access-Control-Allow-Methods' => 'PUT,POST,GET,OPTIONS,ORIGIN',
            'Access-Control-Allow-Headers' => 'Accept,Authorization,Content-Type,Origin,X-Auth-Token',
            'Access-Control-Allow-Credentials' => 'true',
        ];
        if ($request->getMethod() === "OPTIONS") 
            // The client-side application can set only headers allowed in Access-Control-Allow-Headers
            return Response::make('OK', 200, $headers);
        

        $response = $next($request);
        foreach ($headers as $key => $value)
            $response->header($key, $value);
        
        return $response;
    

这是我在 iis 中配置 CORS 的答案

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept,Authorization" />
        <add name="Access-Control-Allow-Methods" value="GET, PUT, POST, HEAD, OPTIONS" />
        <add name="Access-Control-Allow-Credentials" value="true" />
    </customHeaders>
</httpProtocol>

【参考方案1】：

似乎 API 无法处理 CORS preflight requests。它应该为OPTIONS 方法返回Access-Control-Allow-Origin 标头（与Access-Control-Allow-Methods 一起）和204 No Content。

您可以通过curl -v -X OPTIONS http://tms.test/api/top-sale查看。

【讨论】：

谢谢！如您所见，所需的标题不存在。

总结：这不是你的前端代码的错，这应该在服务器端解决。

我已经阅读了 CORS 预检请求，但我不明白。 Acess-control-allow-origin:'*'还不够吗？

我设置了我的后端`return $next($request) ->header('Access-Control-Allow-Origin','*') ->header('Access-Control-Allow-Methods ','PUT,POST,GET,OPTIONS,ORIGIN') ->header('Access-Control-Allow-Headers','Accept,Authorization,Content-Type,Origin,X-Auth-Token');`跨度>

当您使用GET HTTP 方法访问您的 API 时，会设置所需的标头。问题是当你用OPTIONS 方法击中它时。正如您在对curl -X OPTIONS 的响应中看到的那样，标头不存在。您能否在您的问题中提供您的服务器端路由的代码 sn-p？

【参考方案2】：

您可以尝试使用 http-proxy-middleware 为您的 API 添加代理。请注意，这仅适用于本地开发。

您将获得使用 http-proxy-middleware here 的用户指南。

vueJS具体用法可以试试https://forum.vuejs.org/t/vue-cli-3-how-to-properly-use-http-proxy-middleware/33723

【讨论】：

如果我在本地解决这些问题那我会在网上找到吗？

你可能有。通常，对于生产，我们使用 nginx 反向代理来代理我们的请求。

您在生产中也会遇到同样的问题。如果您的后端无法在本地正确处理它，这些开发代理会为您设置所需的标头，但它们不会出现在生产中。