解决跨域常见方案（is therefore not allowed access)

目录

什么是跨域：

跨域问题的产生原因：

什么标签可以跨域

几种解决跨域的常见方案

---

什么是跨域：

     在同一网页中 访问多个不同域名下的接口获取数据，即不同域名或不同端口或不同协议的接口。这种现象就是跨域。

    这里的域名，同一顶级域名下不同二级域名也会出现跨域现象：

    即：http://www.baidu,com 和http://zhidao.baidu.com也会跨域，

    端口号和协议同理。

---

跨域问题的产生原因：

      出于安全考虑，防止网络钓鱼等行为，主要是防止CSRF攻击。浏览器默认开发时设置的基于XMLHttpRequest跨域校验，各浏览器可以通过修改配置的方式来关闭跨域，如果有需要可以参考“引用参考1”设置。

什么标签可以跨域

有三个标签允许跨域加载资源：

1、<img src=“http://www.baidu.com”> 属性用于指定图像文件的 URL

2、<link rel="stylesheet" href="https://ss1.bdstati/css/soutu_new2_b3a7e98.css" >href 属性规定被链接文档的位置（URL）

3、<script src=“http://www.aaa.com”> 规定外部脚本文件的 URL。

从上面可以看出，主要是一些引入的图片和js/css等脚本标签，因为这个大部分都是需要访问一下共用的域名。

几种解决跨域的常见方案

1、通过后端代理的方式。即前端访问的域名不变，根据域名后的资源路径由后端服务器进行访问 获取数据后再返回给前端。

     这里主要有两种方式：

    a、只是代理访问代理访问可以通过nginx 配置

  /test/test.do{
   proxy_pass  http://192.168.1.1:8080/test/test.do
}

    b、由后端访问然后组装好前端需要的数据结构进行返回。

2、jsonp的方式，这个我个人比较推荐，尤其是一些对外开放的数据。但是主要应用于get请求，其他请求方式不起效果。

      具体例子可以参考下 ”引用参考2“ 中的jsonp的实现方式，这个我感觉是网上写的比较全的例子了。

3、跨域资源共享（CROSS）

       Java后端的话可以在RequstMapping()请求路径上添加@CrossOrigin这个方式去实现允许接口跨域访问，通过返回请求头,浏览器来判断是否支持。

Access-Control-Allow-Credentials

true

Access-Control-Allow-Headers	Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers,T-px-Validate-Token,T-px-Post-ID,T-px-Trace-ID,T-px-Lesson-Num,T-px-Class-ID,T-px-Client-Type,T-px-Client-IP
Access-Control-Allow-Methods	GET, PUT, POST, DELETE, OPTIONS
Access-Control-Allow-Origin	*

Access-Control-Allow-Credentials  //设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。

从4.2版本开始，Spring MVC对CORS提供开箱即用的支持。不用添加任何特殊配置，只需要在Spring Boot应用的controller方法上注解@CrossOrigin，并添加CORS配置。通过注册一个自定义addCorsMappings(CorsRegistry)方法的WebMvcConfigurer bean可以指定全局CORS配置。

     具体的CROSS的详细讲解可以看一下 引用参考3.

4、通过document.domain实现跨域访问，这种方式的思路主要是请求域名有相同的根域名来采用。用的比较少不建议采用。

     可以参考 引用参考4 中的document.domain部分。

引用参考1：浏览器允许跨域设置（不用于生产环境，开发用） - LiuChunfu - 博客园Firefox之前看过FF下关闭跨域限制的方法：firefox安全性强，不允许跨域调用。Firefox 要取消XMLHttpRequest的跨域限制的话从 about:config 里设置 signehttps://www.cnblogs.com/LiuChunfu/p/8072448.html引用参考2：

XmlHttpRequest使用及“跨域”问题解决 - 咸咸海风 - 博客园https://www.cnblogs.com/651434092qq/p/11109199.html

 引用参考3：

跨域资源共享 CORS 详解 - 阮一峰的网络日志http://www.ruanyifeng.com/blog/2016/04/cors.html引用参考4：

关于跨域,以及跨域的几种方式 - 陈诗烁 - 博客园https://www.cnblogs.com/chenshishuo/p/4919224.html