Error 'Access-Control-Allow-Origin' header] after configuring the server in vue axios

after the vue project is configured to the server, the request is successful and the returned data can be seen in the browser, but an error is reported:

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

the axios I configured is:

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"
  }
});

I used vue 3.0-cli, and then created a new vue.config.js file with the following proxy settings:

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"
      }
    }
  }

but when deployed to the server, it is found that the request is not forwarded to the address of target, but is directly requested to the configured server address:
http://pre.promotion.jmxy.moc.,
but the actual interface address is http://pre.api.jmxy.mockua.com/

after searching around, it all told the backend to configure the domain name requested for me by Access-Control-Allow-Origin , but the backend tried to configure it and found that the problem was not solved, and after specifying the domain name, several other items on this server could not be accessed normally. So I would like to ask whether there is a solution to this problem at the front end, or a solution at the back end, thank you!

resolved:

solution:

  withCredentials: false, // cookie

just set this to false in axios. Our project does not need to carry cookie, so the backend of the previous project has not been changed. I just took over, so I am not very clear, so this problem arises. If I need to carry cookie, I have searched around and found that it is basically the same as the answers given by the following people, and the backend configuration is required.

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';