什么是跨域?
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,
是浏览器施加的安全限制。

同源?
所谓同源是指,域名,协议,端口均相同

第一种解决跨域的方法

cors 解决跨域的模块

最简单暴力解决跨域的方法

先引入模块

var cors = require(“cors”);
 app.use(cors()) //使用cros模块


注意:该方法会让所有接口都支持跨域

第二种解决跨域的方法

服务器需要配置

解决跨域的方式 添加一个 Access-Control-Allow-Origin 的字段 配置白名单
单独的对一个接口进行配置解决跨域的 如果设置为 * 允许所有跨域请求都可以访问

req.headers.origin // 获取本次请求的请求源
res.header(“Access-Control-Allow-Origin”, “*”) // 设置响应头 添加一个
 res.header(“Access-Control-Allow-Origin”,)


参数2 本次请求的请求源
设置之后这个请求源就可以跨域访问

如何设置白名单
把 * 改成 请求源
可以把请求源放到一个数组里面 让后获取现在发送请求的请求源用 indexOf 来判断数组里有没有这个请求源如果有就运行跨域
没有就不允许跨域

第一种解决跨域的方法3

使用cors单独给一个添加跨域配置 在使用cors的文件里面引入cors模块,可以在处理函数第二个参数添加cors() 解决跨域

第三种解决跨域的方法

  1. 什么JSONP?
    JSONP(JSON with Padding) 是 json 的一种"使用模式"。就是通过HTML标签的一些特殊属性(src, href),
    这些特殊属性不受同源策略控制,而JSONP就利用了这个特性,实现跨域访问。
  2. 怎么用JSONP实现?
    通过

jsonp跨域本质 利用script标签的src属性 在加载资源不会存在跨域问题。 利用这个属性用script进行发起请求吧前端的函数
作为请求的参数发给服务器,服务端拿到请求参数,而这个请求参数又是一个函数,所以服务器把函数的调用的格式字符串传递
给客户端并且把响应数据写进函数参数里,让后客户端拿到函数调用的字符串 会立即执行就可以在回调函数里面拿到数据。
注意:该方法需要服务器支持

第四种解决跨域的方法

代理服务器解决跨域

http-proxy-middleware 代理服务器模块
createProxyMiddleware() // 配置代理服务器


参数是一个配置对象
配置对象的参数

target // 设置请求的目标服务器
 // 路径重写 把以xzy为开头的路径要进行代理服务器转发,真实的请求没有xzy这一路径,所以把路径重写
 // 把xzy替换成""
 pathRewrite{"^/xzy": “”} // 值是一个对象
 changeOrigin: true // 是否允许跨域 true 允许跨域,改变请求源
 ws: true // ws :websocket,套接字,支持双通信的网络的协议, 是否支持websocket 可以不配置
 secure: false, // 如果是https这个接口 需要进行该项配置