很多接口存在跨域问题,一版都会说让后端开发在接口加一个"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代理即可。


charlotteeeeeee
74 声望7 粉丝