likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 28

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

开发中最常见的跨域问题

跨域问题的出现

同源策略” :同源策略会阻止一个域的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