Code Address:
Github.com/XinYueXiao/…

One, make different sources

1. Create a server 3006 to process requests

1.1 In the index.html page, simulate the request API/Users

1.2 Analog server. The server is on port 3006



1.3 Start api.js using Nodemon, and you can see the request information at http://localhost:3006/



The Nodemon is used to start the Node service. The service code is automatically updated after the tool is saved. You do not need to restart the startup file

2. Create another server 3008 to request data




2.1 Start the two port services together. Import two service files in index.js and start index.js

2.2 Access 3008 and access API/Users 404



3. Deal with it



3.1 👁 The port is faulty

3.1.1 Changing the interface request of index.html to Port 3006



  • After comparing the interface requests of different ports, it is found that when you access 3006 through 3008, the interface request succeeds and the browser does not display it



  • View browser error –> Cross-domain request occurred at this time (different port)



Blocked from the source by CORS policy
http://localhost:3008 “visit”
http://localhost:3006/The API/users”


XMLHttpRequest: the “access-Control-allow-Origin” header value is”
http://localhost:3008′ does not equal the source provided.

  • Access-control-allow-origin = access-Control-allow-origin = access-Control-allow-origin

– ‘access-Control-allow-origin’ is not set



– If ‘access-Control-allow-origin’ is set, the page is displayed normally



3.1.2 As can be seen from the above, cross-domain is restricted by the browser. Is this the end of it? no

The above example is just a simple request. HTTP also sends a precheck request. When can a precheck request be triggered? The HTTP request uses the following HTTP methods

  • PUT
  • DELETE
  • CONNECT
  • OPTIONS
  • TRACE
  • PATCH

Or a header field other than the header field set is artificially set for CORS security

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
  • Content-TypeThe value of is not one of the following:
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

    • Author: coder_sherry


    Links:
    www.jianshu.com/p/b55086cbd…(See a more detailed explanation.)


    Source: Jane Book


    3.2 👁 Precheck request problems

    3.2.1 Simulated Precheck Request –> Manually set CORS unsafe field

    In this case, the browser is in the pending state, and the pre-check request needs to be implemented to make it become OK

    3.2.2 Implement the precheck request –> Set the unsafe field to permit



    • After the precheck request is changed to pass, two requests will be initiated, the first is the precheck request, and the ‘X-token’ is set to allow field



    • In this case, the X-Token is allowed. The request is normal and the X-Token value is set for the normal request



    3.3 👁 ‘withCredentials’ requests credentials across domains

    XMLHttpRequest.withCredentials A property is a
    BooleanType indicating whether a qualification such as cookies, Authorization Headers, or TLS client certificates should be used to create a cross-site access control
    Access-Control) request. Use it on the same site
    The withCredentials attribute is invalid.


    3.1 If you need to add cookies to your request headers, you need to set ‘withCredentials’ to’ true ‘in the corresponding position

    4. The Proxy agent

    4.1 Adding a proxy to Proxy and commenting the operations added before



    4.2 Running nodemon proxy.js



    4.3 Summary, two lines solve it 😎