“This is the second day of my participation in the Gwen Challenge.

Premise:

The user requests the interface of localhost: 5000 on the page of localhost: 300. Result: A cross-domain request will occur due to ajax origin restriction.

The proxy server is open on port 3000, because if it’s open on port 5000, it’s still going to cross domains, so it’s open on port 3000, so when we make an AXIos request it’s going to address 3000, and when the proxy receives this request it’s going to forward it to the target server, Question why can proxy servers forward without cross-domain? The answer is no, because proxy servers eschew Ajax, so there is no same-origin policy restriction.

You can see that port method 1 for 3000 is used here:

Set “proxy:” Proxy address “in package.jsonhttp://localhost:5000 “,The disadvantage is that only one target server can be configured, so how can we limit when there are multiple target servers? So let’s use method 2. Method 2:

Create a new setupproxy.js file in the package.jso directory:

The changeOrgin: Get (‘Host’) on the target server will be 5000 if it is true, 3000 if it is false. Maybe the request won’t succeed, so we usually say true pathRewrite: rewrite the path, like our target interfacehttp://localhost:5000/students,Since we need to configure the proxy, we will prefix the request with/API1,

Since the request is made from the proxy first, we write the request address ashttp://localhost:3000/api1/studentsWhen encountering api1, we need to proxy to server 5000. If we do not rewrite the path, our final request path becomeshttp://localhost:5000/api1/studentsThe proxy server will first request the resource from localhost 3000, and if it cannot find the flower, it will forward it to server 5000