Next.js 配置接口跨域代理转发

JavaScript020

Next.js 配置接口跨域代理转发,第1张

上一个章节中，讲解了next下如何通过axios获取远程数据，可是遇到了跨域的问题，所以单独写个文章讲解一下，如何在开发模式dev下面，解决跨域，没有使用跨域代理之前

下面开始讲解如何跨域

首先，打开我们的koa项目，启动，用koa来作为后台接口模拟数据

好，正式开始配置~~~~~~~~~~~~~~~~~~~~~~~~~~

打开Next项目

1:安装跨域的依赖中间包 http-proxy-middleware

2：根目录下面新建server.js

//server.js

ps：target一定要修改为 http://localhost:3333/api/ ，而不是' http://localhost:3333 ，否则就会404，我这里就搞错了

3：修改package.json

//package.json

4:使用

//pageA.js

可以看到前面的前缀就不需要啦，直接加地址就好了

效果图

OK，成功跨域

上篇讲了 nodejs做http请求转发，解决js跨域问题(二)

现在遇到一个问题，公司的服务器防火墙针对User-Agent做了拦截。需要特定的User-Agent才能访问到API接口

如果用上篇的方法js的ajax请求目前在很多浏览器中是无法修改User-Agent，这样的话导致api请求可能无法成功。

我们可以在nodejs这一层加入请求修改User-Agent，不仅仅可以在nodejs这一层代理修改User-Agent，还可以修改request和response

例如

下面就修改了request的headers 添加了mytest=0000000000000和User-Agent= mytest

也修改了request里面的body给body添加了 Type : 'jpg' 以及修改了 FileName : '2.jpg'

一定要注意如果修改了 request 的 body 值一定要重新设置 Content-Length

response原本是返回一个json {"ID":"1234567890","Name":"张三"} ,也把这个json改了，改成 {"ID":"1234567890","Age":2}

再用vue开发前端，而使用NestJS作为后端时，在发起请求时会遇到跨域问题，

解决方式很简单，只需在NestJS入口文件main.ts加上一句

表示允许跨域