开发中最常见的跨域问题

跨域问题的呈现

同源策略” :同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具备雷同的协定(protocol),主机(host)和端口号(port)

什么是跨域

当一个申请url的协定、域名、端口三者之间任意一个与以后页面url不同即为跨域

解决跨域的办法有有很多来对应各种利用场景。

搭建反向代理服务器

不同于须要后端开启CORS 这个前端本人就能够实现。

以装置有node环境为前提
如果没装置过请详询node环境装置教程

git地址:

https://gitee.com/huijia1/proxy-server

装置express:

npm install -g express
//引入expressconst express = require('express');const app = express();//引入代理中间件const {createProxyMiddleware}=require('http-proxy-middleware')//设置动态目录 能够把html,js等文件放入其中进行拜访app.use(express.static('./public'));//将门路中带有api的申请地址进行代理app.use('/api',createProxyMiddleware({    //target为须要代理的接口地址    target:'http://localhost:8080',    //批改源头进行坑骗    changeOrigin:true,    // 将门路中的api去除 这个依据理论状况进行保留    pathRewrite:{        "^/api":""    }}))//开启3000端口app.listen(3000);

git地址:

https://gitee.com/huijia1/proxy-server