1-19 using CORS to solve interface cross domain problems

utilize CORS Solve the problem of interface Cross Domain

GET and POST Interface , There is a very serious problem ： Cross domain requests are not supported .

There are two main solutions to interface cross domain problems ：

1. CORS（ Mainstream solutions , Recommended ）
   cors yes Express A third-party middleware . Through installation and configuration cors middleware , It can easily solve cross domain problems .
   The steps used are divided into the following three steps ：
   1. function npm install cors Install middleware
   2. Use const cores = require(‘cors’) Import Middleware
   3. Call before routing app.use(cors()) Configuration middleware

What is? CORS Cross-domain resource sharing ？
COR（cross-Origin Resource Sharing, Cross-domain resource sharing ） By a series of HTTP The response header consists of , these HTTP The response header determines whether the browser blocks the front end JS Code gets resources across domains .
The browser's same origin security policy blocks web pages by default “ Cross domain ” Access to resources . But if the interface server is configured CORS dependent HTTP Response head , You can access the cross domain access restrictions on the browser side .

(1)CORS The response header can carry a Access-Control-Allow-Origin
If there is Access-Control-Allow-Origin The value of the field is a wildcard *, Indicates that requests from any domain are allowed , The sample code is as follows ：

res.setHeader('Access-Control-Allow-Origin','*')

(2) By default ,CORS Only the client can send the following message to the server 9 A request header ：
Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-Type( Values are limited to text/plain、mutipart、from-data、application/x-www-form-urlencoded One of the three )
If the client sends additional request header information to the server , On the server side , adopt Access-Control-Allow-Headers Declare additional request headers , Otherwise, this request will fail

(3) Response head Access-Control-Allow-Methods
By default ,CORS Only client initiated GET、POST、HEAD request .
If the client wants to pass PUT、DELETE And so on , On the server side , adopt Access-Control-Alow-Methods To indicate what is allowed by the actual request HTTP Method .

// Only supported by default POST,GET,DELETE Request method 
// Only POST,GET,DELETEM,HEAD Request mode 
res.setHeader('Access-Control-Alow-Methods','POST,GET,DELETEM,HEAD')
// Allow all HTTP Request method 
res.setHeader('Access-Control-Alow-Methods','POST,GET,DELETEM,HEAD')

const cors = require('cors')
app.use(cors())

2. JSONP( Flawed solutions ： Only support GET request )