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'即可

}

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值