corspost请求失败_node后台cors跨域post请求失败

node后台cors跨域post请求失败

前言

再一次开发中，vue前台+node后台，并且在两个不同的服务下

使用node搭建后台时，使用cors跨域，之前在app.js的配置是：

1

2

3

4

5

6

7

8myapp.all('*', function (req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "X-Requested-With");

res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

res.header("X-Powered-By", ' 3.2.1')

res.header("Content-Type", "application/json;charset=utf-8");

next();

});

之后在开发中，会出现post请求跨域失败，报错是403，服务器拒绝访问。。。。。但get请求没问题

最后更改了cors跨域的配置代码：

1

2

3

4

5

6myapp.all('*', function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With,Content-Type");

res.header("Content-Type", "application/json;charset=utf-8");

next();

});

就好了！

请教了一位后台开发人员，他说是之前的配置没有兼容全，使用兼容全的代码即可

跨域

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表：

跨域一般常采用以下三种方式

jsonp

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

1

2

3

4

5

6

7

8

9

10

11

12

13

var script = document.createElement('script');

script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack

script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';

document.head.appendChild(script);

// 回调执行函数

function onBack(res) {

alert(JSON.stringify(res));

}

后台cors跨域

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置。

带cookie请求：前后端都需要设置字段，另外需注意：所带cookie为跨域请求接口所在域的cookie，而非当前页。

目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS))，CORS也已经成为主流的跨域解决方案。

node后台代码示例：

1

2

3

4

5

6myapp.all('*', function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With,Content-Type");

res.header("Content-Type", "application/json;charset=utf-8");

next();

});

proxy代理

proxy反向代理在vue目录webpack.config.js中配置：

1

2

3

4

5

6

7

8

9

10proxyTable: {

'/api':{

target:"http://47.93.166.112/BrainPcWeb",//设置你调用的接口域名和端口号 别忘了加http

changeOrigin:true,

pathRewrite:{

'^/api':''//这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替

//比如我要调用'http://40.00.100.133:3002/user/login'，直接写‘/api/user/login'即可

}

}

}