Vue axios reported an error’ access-control-allow-origin’ header’ after configuring the server

  javascript, vue.js

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

Failed to loadhttp://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

The request status code is 200. The returned data can also be seen in the browser:

clipboard.png

The following are requestheader and response headers

clipboard.png

clipboard.png

clipboard.png

The axios I have configured are:

var instance = axios.create({
 baseURL: baseUrl,
 Time Out (magazine): 1000 * 12,//Create an axios instance and set the timeout to 12s
 With credentials: true//cookie allowed
 headers: {
 "Content-Type": "application/x-www-form-urlencoded;  charset=utf-8"
 bracket
 });

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", ///local real machine test
 // 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"
 bracket
 bracket
 bracket

However, after deployment to the server, the discovery request will not be forwarded to target’s address, but will be 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 a round of searching, they all said they wanted the back-end configuration.Access-Control-Allow-OriginI requested this domain name for me, but the backend tried to configure it, and found that the problem was not solved, and after the domain name was specified, several other items of this server could not be accessed normally. Therefore, I would like to ask whether there is a solution to this problem at the front end or at the back end. Thank you!

Resolved:

Resolution:

WithCredentials: false, // cookie allowed.

Just set this one to false in axios inside. Our project doesn’t need to carry cookies, so the back end of the previous project hasn’t been changed. I just took over, so I’m not very clear about it. If I need to carry cookies, I searched around and basically answered the same questions as the following ones, requiring back end configuration.

For requests with credentials attached, the server must not set the value of Access-Control-Allow-Origin to “”。 This is because Cookie information is carried in the header of the request, if the value of Access-Control-Allow-Origin is ““The request will fail. The value of Access-Control-Allow-Origin is set tohttp://foo.example, the request will execute successfully.

That is to sayAccess-Control-Allow-CredentialsSet toTrueIn the case of
Access-Control-Allow-OriginCannot be set to*

MDN_CORS

Ps: The specified domain name can be used in the back endArraySimilar to save a white list of domain names
If there is a request, judge firstOriginIs it in the white list inside and then dynamically set?Access-Control-Allow-Origin