After some Baidu searches, I tried many methods, and finally found an answer that can solve my problem. The operation is as follows:
In the vue.config.js file, add a configuration item under the same level of target in the cross-domain configuration option
onProxyReq(proxyReq){
proxyReq.removeHeader('origin')
},
Explanation from a big guy:
Before sending the request to the proxy server, remove the Origin field from the request header.
When using a cross-domain proxy, the browser will automatically add the Origin header field to indicate the source address of the request. For example, if your website is www.example.com and you make an Ajax request to the domain api.example.net, the browser will automatically add the following request headers:
Origin:
The request header of www.example.com is used to indicate the source address of the request so that the server can make a correct response. In some cases, such request headers may cause problems, such as being restricted by CORS or being blocked by firewalls, etc. At this point, you can delete the request header by configuring the onProxyReq hook function.Specifically, the onProxyReq hook function is called before the request is forwarded by the proxy, and it receives a proxyReq object parameter representing the request. Therefore, the function of the above code is to delete the Origin field in the request header by calling the removeHeader() method on the proxyReq object before the proxy request is sent, so as to avoid potential cross-domain problems.
Deleting the Origin field in the request header does not completely solve the cross-origin problem, but it can avoid some CORS problems.Typically, browsers place security restrictions on cross-origin requests to prevent data from untrusted sources from being loaded and executed. One of the restriction mechanisms is CORS (Cross-Origin Resource Sharing cross-origin resource sharing).
The CORS mechanism requires the server to include some specific header fields in the response to allow cross-origin requests. One of the important header fields is Access-Control-Allow-Origin, which indicates which domain name requests the server allows to access resources. If the value of the header field does not match the Origin field in the request header, the browser will intercept the request by default to ensure data security.
When you use a proxy to initiate a cross-domain request, the proxy server will send the request to the target server instead of the browser and return the response to the browser. Therefore, deleting the Origin field in the request header can avoid some browser-specific cross-domain restrictions and make the proxy request smoother. However, it should be noted that if the requested target server clearly stipulates that the request must carry the Origin header field to process the request, deleting the request header field may cause the request to fail or be rejected.