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
clipboard.png

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.


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

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1be52b9-31744.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1be52b9-31744.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?