On the Cross-domain problem of Access-Control-Allow-Origin - Codes Helper - Programming Question Answer

On the Cross-domain problem of Access-Control-Allow-Origin

Front-end separated development encounters cross-domain problems

the backend needs session verification, and
the front end uses

.

xhrFields : {
  withCredentials: true
},
crossDomain : true,

backend configuration

put the backend into the session of cookie and pass it over.

two solutions have been tried:
one.
the backend sets Access-Control-Allow-Origin to * and Access-Control-Allow-Credentials to true, but both chrome and Firefox report wrong because the front end sets withCredentials: true.

II.
the backend sets Access-Control-Allow-Origin to the specific IP address and port number of the frontend. Firefox accesses normally, and the backend can get session normally, but the chrome browser is blocked, the requestHeader is not displayed, and the backend does not get session.

now the front end is debugged by modifying the chrome browser attribute (--args-- disable-web-security-- user-data-dir). Will this cross-domain problem continue after the product is launched? If the same as the test can not allow users to change the configuration wow, I would like to ask you whether there is a way to solve, thank you.

Cors access-control-allow-origin

Apr.16,2022

there will be more problems with ie kernel browsers in these ways. It seems that you have permission changes at both ends. Cross-domain methods can be solved by trying jsonp.

try setting this:

Access-Control-Allow-Credentials: true

reference documentation:
https://developer.mozilla.org...
https://developer.mozilla.org...

1. The request must have a field Access-Control-Request-Method
2. If the request has a Access-Control-Request-Headers field, the backend must also have
3. The front end withCredentials and the back end Access-Control-Allow-Credentials must also be set to true

would like to ask the landlord whether this last problem has been solved?

I am debug. I found that the cross-domain problem is caused by the format of post data.
Why is there such a problem? Because under cross-domain settings, clients are only allowed to initiate simple requests, but complex requests are not supported
. My post data is in js object format, that is, json format, which allows cross-domain settings. Complex requests, that is, data requests in json format are not supported.
take a look at this article: https://www.jianshu.com/p/ebd...

how do I solve this?
modify the data format so that it looks like this:

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

document: https://github.com/axios/axios

at this point, the request becomes a simple request, which conforms to the setting that allows cross-domain requests, and solves

.

Previous: Import problem in ES6 Grammar

Next: How to solve the problems that arise when playing sound effects with audio tags and AudioContext on iPad at the same time?

Menu