解决跨域问题

在这里插入图片描述

1、cros跨域资源共享(核心是设置Access-Control-Allow-Origin
(1)在nodeJs服务端:
npm install cors 安装中间件
在这里插入图片描述
在服务端引入并设置cros

在这里插入图片描述
即可得到响应头中有如下字段(选中的Access-Control-Allow-Origin字段,只要设置该字段就可以开启CORS,解决跨域问题,当然服务器端也可以增加更多的跨域配置的限制)
在这里插入图片描述
可顺利得到响应
在这里插入图片描述
若想要设置一些源限制,可以设置origin为具体值
在这里插入图片描述

可得,
在这里插入图片描述
当用户想要修改服务器数据时,例如使用PUT,PATCH或者DELETE方法时,浏览器会自动发送一个预检请求,就是查看服务器是否支持当前跨域请求,因此预检请求没有哪个具体方法,而是用Request Method:OPTIONS,服务器端响应头中可以看到允许使用的方法(Access-Control-Allow-Methods)
在这里插入图片描述
可以在服务器端设置想要的方法:(除此之外,服务器端还可以添加其他的跨域配置头限制,如设置请求头中Access-Control-Allow-Headers设置请求头中允许携带的参数,“Access-control-max-age” 设置请求通过预检后多少时间内不再检验,减少预请求发送次数等)
在这里插入图片描述
当使用put方法时,这里不允许PUT方法,就会报错:
在这里插入图片描述
在这里插入图片描述
注意:每次更改后都需要重新启动server.js
2、反向代理nginx或者其他代理服务器
3、以前没方法时候常用JSONP(JSON with Padding)
通过href或者src请求下来的图片,音视频,js脚本,css文件等是不存在跨域问题的(本身在设置这个scripts标签时就是允许跨域的,并且默认type=“text/javascript”,请求的内容(字符串)会被浏览器当作js执行),只有通过ajax/fetch请求的文件才会存在跨域问题。
方法:
(1)、在src中的url上给服务器提供一些额外参数,把函数名作为url参数穿给服务器。在客户端写好函数function(真实数据){}。
在这里插入图片描述

(2)、服务端给数据外包一个传过来的js函数,然后在外包一层作为传输用的JSON格式,以JSON格式传给客户端
在这里插入图片描述

(3)、客户端收到后,调用提前设置好的函数,执行服务器传过来的数据
可得到结果。
在这里插入图片描述

缺点:a只支持get不支持post
b存在安全隐患,可能遭受xss攻击

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值