利用代理解决跨域问题

可以解决跨域问题的方法有很多 ,不用麻烦后端开启cors跨域 前端使用node自建代理服务器即可。

1,打开一个空文件夹

键入 npm init

创建项目配置

如果没有其他用途 全部回车跳过即可

最后敲入yes 完成

现在文件夹中已经生成了package.json文件

2,接下来安装express 有条件的使用cnpm

键入 cnpm i express

安装完成后继续安装express中间件http-proxy-middleware

键入cnpm i http-proxy-middleware

3,在接下来 创建一个启动文件proxy.js

新建一个静态文件目录 public

引入express和中间件

const express = require(express); const app = express(); const {createProxyMiddleware}=require(http-proxy-middleware) app.use(express.static(./public)); app.use(/api,createProxyMiddleware({ target::8080, changeOrigin:true, })) app.listen(3000);

关于http-proxy-middleware的更多操作可前往npm查看https://www.npmjs.com/package/http-proxy-middleware

可以看到当前开启的端口为3000

其中

target中填写需要代理的地址

准备工作基本完成 接下来开始使用

public 目录下新建 index.html

在文件夹写一个xhr请求

打开刚才的cmd

键入 node proxy.js

开启服务器

接下来打开 http://localhost:3000/ 即可看到html文件

随便写一个xhr请求请求 http://localhost:8080/api/new 接口

打开页面你就会发现 跨域请求已经可以实现了

代码链接

biz/proxy-server​gitee.com/huijia1/proxy-server