• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

nodejs + proxy处理接口跨域问题

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0802/103394.html 1190000019949780

很多接口存在跨域问题,一版都会说让后端开发在接口加一个"Access-Control-Allow-Origin"之类的就可以了

BUT就有时候,后端处于任何理由,可能加不了。

那接口又要调试,怎么办?

以下是nodejs代理跨域解决的方式

如果你还不知道如何使用nodejs,npm,webpack之类的,这篇文章可能对你来说没什么用

下面开始正题:
1.正常编写js
首先是我们正常的目录结构:html+css+js。静态页面开发完成之后,你需要对接数据接口,我们把正常的ajax接口请求放在script.js里面,请求路径在下图2。我们的所有跨域处理在app.js中

clipboard.png
clipboard.png

2.app.js全文:

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();
app.use('/', proxy({
    // 代理跨域目标接口
    target: 'http://localhost:8090',
    changeOrigin: true,

    // 修改响应头信息,实现跨域并允许带cookie
    onProxyRes: function(proxyRes, req, res) {
        res.header('Access-Control-Allow-Origin', '*');
    },
    // 修改响应信息中的cookie域名
//  cookieDomainRewrite: ''  // 可以为false,表示不修改
}));

app.listen(8020);//你的端口

3.nodejs运行,执行代理。
到app.js的父级目录上运行:node app.js。将你的代理运行起来如下所示为正常。然后你就可以在你的JS里面正常调用你的接口啦。

clipboard.png

这是一般我们没有用webpack的时候的做法。如果使用了webpack之类的,里面会有封装好的跨域代理。修改根目录下的config->index.js里面的proxy代理即可。

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!