vue axios 配置上服务器后报错'Access-Control-Allow-Origin' header]（亲测）

ゝ一纸荒年。 2023-10-18 18:11 7阅读 0赞

#### vue项目配置到服务器后，请求能够成功，返回的数据也能在浏览器中看见，但是报错： ####

Failed to load [http://pre.api.jmxy.mockuai.c...][http_pre.api.jmxy.mockuai.c...]: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '\*' when the request's credentials mode is 'include'. Origin '[http://pre.promotion.jmxy.moc...][http_pre.promotion.jmxy.moc...]' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

![clipboard.png][]

请求状态码为200. 在浏览器中也能看到返回的数据：

![clipboard.png][clipboard.png 1]

下面是requestheader 和 response headers

![clipboard.png][clipboard.png 2]

![clipboard.png][clipboard.png 3]

![clipboard.png][clipboard.png 4]

#### 我配置的axios为： ####

var instance = axios.create({
      baseURL: baseUrl,
      timeout: 1000 * 12, // 创建axios实例,设定超时时间是12s
      withCredentials: true, // 允许携带cookie
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      }
    });

我用的vue 3.0-cli ，然后新建了一个vue.config.js 文件，里面代理设置如下：

devServer: {
        open: true,
        host: "0.0.0.0", //本地真机测试
        // host: "localhost",
        port: 8900,
        https: false,
        hotOnly: false,
        disableHostCheck: true,
        proxy: {
          "/api/": {
            target: "http://pre.api.jmxy.mockua.com/",
            secure: false,
            pathRewrite: {
              "^/api/": ""
            },
            changeOrigin: true,
            logLevel: "debug"
          }
        }
      }

但是部署到服务器后，发现请求并不会转发到target的地址，而是直接请求到配置的服务器地址：  
[http://pre.promotion.jmxy.moc...][http_pre.promotion.jmxy.moc... 1] ，  
但是实际接口地址是：[http://pre.api.jmxy.mockua.com/][http_pre.api.jmxy.mockua.com]

搜了一圈下来都是说要后端那边配置`Access-Control-Allow-Origin`为我请求的这个域名，但是后端尝试配置了一下，发现问题并没有解决，而且指定了域名后，这个服务器的其他几个项目就不能正常访问了。 所以想请问下这个问题前端有没有解决的办法，或者后端的解决办法，谢谢各位！

#### 已解决： ####

解决方法：

withCredentials: false, // 允许携带cookie

在axios里把这一条设置为false就行了，我们的项目是不需要携带cookie的，所以之前的项目后端都没有改过，我刚接手，所以不太清楚，才闹出这个问题，如果需要携带cookie的话，我搜了一圈下来，基本上都和下面几位的回答的是一样的，需要后端配置。

来源：[https://segmentfault.com/q/1010000016904795/a-1020000016904951][https_segmentfault.com_q_1010000016904795_a-1020000016904951]

[http_pre.api.jmxy.mockuai.c...]: http://pre.api.jmxy.mockuai.com/jml/auth/session_token/get?format=json&app_key=e83a211ec1645e51c84506c065e3379b&time=1541350006&app_version=2.5.0&device_id=admin&phone_model=chrome&system_version=69.0.3497.100&api_sign=d87a54ca220f9f15233cf0e015ebb201
[http_pre.promotion.jmxy.moc...]: http://pre.promotion.jmxy.mockuai.com/
[clipboard.png]: https://segmentfault.com/img/bVbi5PV?w=1436&h=182
[clipboard.png 1]: https://segmentfault.com/img/bVbi5Qf?w=640&h=170
[clipboard.png 2]: https://segmentfault.com/img/bVbi5SE?w=1110&h=394
[clipboard.png 3]: https://segmentfault.com/img/bVbi5Qk?w=1112&h=560
[clipboard.png 4]: https://segmentfault.com/img/bVbi5Ql?w=1110&h=486
[http_pre.promotion.jmxy.moc... 1]: http://pre.promotion.jmxy.mockua.com/...
[http_pre.api.jmxy.mockua.com]: http://pre.api.jmxy.mockua.com/
[https_segmentfault.com_q_1010000016904795_a-1020000016904951]: https://segmentfault.com/q/1010000016904795/a-1020000016904951