接口编写

CORS跨域

CORS（Cross-Origin Resource Sharing） 跨域资源共享，这些HTTP 响应头决定浏览器是否阻止前端JS代码跨域获取资源

浏览器的同源安全策略默认会阻止网页跨域获取资源，接口服务器配置了 CORS 相关HTTP响应头可以解除跨域访问限制

解决跨域问题

基本使用

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

http响应头

• Access-Control-Allow-Origin:<origin>|*

  origin 参数值指定了允许访问该资源的外域 URL

  res.setHeader('Access-Control-Allow-Origin','http:yuadh.com')
  

• Access-Control-Allow-Headerss

  默认情况下，CORS 仅支持客户端向服务器发送以下9个请求头

  Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-Type(只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)

  如果客户端向服务器发送了额外的请求头信息，则需要在服务器端设置额外的请求头声明

  res.setHeader('Access-Control-Allow-Headers','Context-type.X-custom-header')
  

• Access-Control-Allow-Methods

  默认情况下，CORS仅支持客户端发起 GET、POST、HEAD 请求

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

请求分类

简单请求

• 请求方式：GET、POST、HEAD

• HTTP头部信息：Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-Type(只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)

  预检请求

在浏览器与服务器正式通信之前，浏览器会发送OPTION请求进行预检，以获知服务器是否允许该实际请求，所以这个一次的OPTION请求称之为预检请求

JSONP

如果项目中已经配置了 CORS ，为了防止冲突必须在 CORS 中间件声明之前使用JSONP的接口

//jsonp接口
app.get('/api/jsonp',(req,res)=>{
  
})
app.use(cors())
//开启了 cors 的接口
app.get('/api/get',(req,res)=>{
  
})