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

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.

clipboard.png

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

clipboard.png

下面是requestheader 和 response headers

clipboard.png

clipboard.png

clipboard.png

我配置的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',
        ];

回答:

正解。。。
我佛了

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注