当前位置:首页 > 技术文章 > 正文内容

跨域的原因以及解决方案

arlanguage5个月前 (12-10)技术文章41

# 为什么会产生跨域问题

  1. 浏览器限制,目前所有浏览器都实现了同源策略规范。
  2. 请求方式Type为xhr。如果非xhr,如json,script则也不会存在跨域问题
  3. 请求方与服务方的源不同,即跨域,包括:
    1. 协议不同
    2. 域名不同
    3. 端口不同

同时满足三个条件才有可能产生跨域问题。

# 解决方案

  1. 对于浏览器限制的解决方案-关闭浏览器的同源策略检查
  2. --args--disable-web-security--user-data-dir设置浏览器的启动参数,将浏览器的同源策略取消。该方式要求所用的用户进行手动操作,肯定是不现实的。
  3. 请求方式Type为xhr的解决方案既然只有Type为xhr的请求才会存在跨域请求,那么我们是不是可以换一种请求方式呢。Jsonp的实现就是这样。将原本Type是xhr的请求伪造成script请求。Jsonp的请求路径后面会自动带上callback参数,服务端可据此判断是否是jsonp请求,将返回值以script的形式进行封装。且服务端需要进行相应的改动。

对于SpringBoot项目

@ControllerAdvicepublic
class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{
  public JsonpAdvice{       
    super("callback");        //约定的jsonp请求参数   
  }
}

JQuery实现jsonp的原理:

动态创建一个script,通过这个script去请求,请求完,该script即被销毁。可通过对jQuery打断点的方式验证。(可以看到JQuery在网页源代码嵌入了一个临时的script,当Jsonp请求完成之后,该Script即被销毁)

  • 弊端:
    • 服务器需要改动
    • 只支持GET方式 (因为获取script都是GET方式,前端指定请求方式也无效,还以GET方式发起的请求)

3. 对于域不同的解决方案

根据实际系统架构来决定使用哪种方式

  1. 被调用方解决返回的响应头的包含允许跨域访问的信息,需要被调用方进行代码的修改。(可由具体应用添加允许跨域信息,也可以由容器,Tomcat,jetty等添加)
    1. 通过Filter实现
    2. 将允许跨域请求的信息配置在nginx或者apache转发服务器

2. 调用方解决

在调用方与被调用方中间再增加一层,该层做转发,将调用方的请求转发到被调用方。其中第一点因为调用方与该转发层在同一个域名下,所以不会有跨域问题。第二点,由于不是浏览器发起的请求,所以转发层调用被调用方也是不存在跨域问题的(参见跨域的三要素)。

简单请求与非简单请求

当浏览器发起一个跨域请求的时候会先判断是简单请求还是非简单请求。

对于简单请求,浏览器会先请求,拿到结果后再判断是否跨域。

对于非简单请求,浏览器会先发起一个预检options请求,检查通过之后再发起实际的请求。

对于带cookie的跨域请求,

  1. 需要将allowedOrigins设置为具体的origin,而不能使用 *。
  2. 需要设置响应参数 allowCredentials(true),允许带cookie的跨域

扫描二维码推送至手机访问。

版权声明:本文由AR编程网发布,如需转载请注明出处。

本文链接:http://www.arlanguage.com/post/47.html

分享给朋友:

“跨域的原因以及解决方案” 的相关文章

Nginx日志切割方法(包含docker容器中nginx日志的切割)

logrotate软件简介logrotate 是一个 Bash 的 SHELL 脚本,可对日志文件进行切分,并将切分后的日志放在统一目录。logrotate 要求 GNU bash、GNU gzip 和 GNU date。logrotate 实用程序旨在简化在生成大量日志文件的系统上对日志文件的管理...

听说你的Nginx还不会记录Response Body?

相信大家都遇到过在排查线上问题或Debug的时候,在某一瞬间,特别想开启Nginx的Response Body日志,来帮助自己快速的定位问题;但找半天发现只有$request_body/$upstream_addr/$upstream_response_time这些相近变量可用;这个时候不要慌......

PHP日志记录

背景在生产环境中日志的重要性显而易见,能快速定位问题和程序的调优。在LNMP架构中怎么记录好程序中的错误日志。设置error_log记录PHP日志信息#将会向PHP报告发生的每个错误 error_reporting = E_ALL #关闭页面显示才能将错误回写到日志文件 display_err...

C# 实现高并发 Web 应用的性能优化秘籍

在现代的互联网应用中,尤其是大型 Web 应用,性能和可扩展性成为了核心竞争力。随着用户访问量和数据量的增大,高并发处理成为了系统稳定性和响应速度的关键因素。无论是电商平台、社交网站还是 SaaS 应用,如何应对海量用户的同时访问,确保系统高效运转,已经成为了技术人员面临的重要挑战。C# 和 ASP...

nginx+spring boot 微服务实现负载均衡

环境准备项目 JDK1.8 以上版本准备好 nginx 环境nginx 配置nginx 的配置文件在/usr/local/nginx/conf 目录下,配置文件 nginx.conf配置信息如下:upstream web_app { server 192.168.226.150:8089 ma...

深入Docker容器之日志篇

操作系统流重定向在linux系统中,运行一个命令,通常会是以下的方式:在linux 和 Unix系统中,在运行程序时,通常会有三种io流: stdin, stdout,stderr 。 stdin 是从外部设备或是键盘获取输入,而 stdout 是标准输出,stderr 是标准错误输出。而不管是标准...