关于前端:解决前端跨域问题搭建反向代理服务器

开发中最常见的跨域问题

跨域问题的呈现

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

什么是跨域

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

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

搭建反向代理服务器

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

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

git 地址：

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

装置 express：

npm install -g express

// 引入 express
const 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