【Vue】vue axios 配置上服务器后报错'Access-Control-Allow-Origin' header]

• Z时代
• 2024-01-10
• 分类：技术分享

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

Failed to load 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...' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

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

下面是requestheader 和 response headers

我配置的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.api.jmxy.mockua.com/

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

已解决：

解决方法：

  withCredentials: false, // 允许携带cookie

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

回答

对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“”。这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为“”，请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 http://foo.example，则请求将成功执行。

也就是说Access-Control-Allow-Credentials设置为true的情况下
Access-Control-Allow-Origin不能设置为*

MDN_CORS

ps: 关于指定域名 可以在后端用个array类似的存一个白名单域名列表
如果有请求 先判断 Origin 是否在白名单里 然后再动态设置 Access-Control-Allow-Origin

            set $origin '*';
            if ($http_origin) {
                set $origin "$http_origin";
            }
            add_header Access-Control-Allow-Origin "$origin";
            add_header Access-Control-Allow-Credentials "true";
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'Origin,Access-Control-Request-Headers,Access-Control-Allow-Headers,DNT,X-Requested-With,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-M
odified-Since,Cache-Control,Content-Type,Accept,Connection,Cookie,X-XSRF-TOKEN,X-CSRF-TOKEN,Authorization';

这个问题完全可以通过配置webpack内部的proxyTable属性来实现

  proxyTable: {
      '/api': {   所有以这个请求开头的请求都会被代理到 target所配置的地方
        target: 'http://localhost:8888',  //这里所有api开头的都被代理到了 localhost:8888 这样就解决了跨域问题
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/v1'  //是否要删除api这三个字替换为别的字段 例如这里我就替换成了 /v1字段
        }
      }
    },

同时你可以通过 配置全局环境变量

    plugins: [
        // 该插件帮助我们安心地使用环境变量
        new webpack.DefinePlugin({
          'process.env.BASE_API':'"/api"'
        })
      ]

然后再 axios的拦截其中就可以开心地使用啦

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

如果你在服务端还出现这个情况，是因为你发起请求的域名和你所请求的域名存在差异，需要后端开发特定域名的跨域请求权限，你们后端需要开发的是你当前发起求请求的域名，而不是你要请求的域名，或者直接让后端配置开放所有域名跨域（当然这个就非常危险了）。

这个是我后端的设置，不知道对你有没有用

$headers = [
                'Access-Control-Allow-Origin' => '*',
                'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, PATCH, DELETE',
                'Access-Control-Allow-Headers' => 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Authorization , Access-Control-Request-Headers',
                //'charset' => 'UTF-8',
        ];

正解。。。
我佛了

以上是 【Vue】vue axios 配置上服务器后报错'Access-Control-Allow-Origin' header] 的全部内容， 来源链接： utcz.com/a/73101.html