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

JavaScript012

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，成功跨域

在构建xmpp web客户端的时候， 如果网站和xmpp服务器的域名不一致，就需要用到跨域请求了。

可以使用 flXHR.js 这个库来实现跨域请求，因为使用了 strophe，所以需要加载以下两个js。之后会在 strophe 中会使用 flxhr 来发起请求。

使用 flxhr 请求， 需要服务器在根目录返回 domaincross.xml 文件, 具体格式点这 ---> 文档链接

ejabberd 的 mod_http_fileserver 组件是专门用来配置文件服务器的组件

在加入 mod_http_fileserver 后, web_admin(web admin管理)功能失效了, google 后发现为 ejabberd 的 bug.

想到的解决的办法，是另外一个端口启动 web_admin。

1.编辑 ejabberd 配置文件， 将 {5280, ejabberd_http, 开头的这段配置替换成

2.将 {mod_http_fileserver, 开头的一段替换为以下，

记得把路径替换成你的。

3.在 /Applications/ejabberd-14.05/www 路径下加入 domaincross.xml