跨域–前后端解决方案

URL:统一资源定位符

完整的、带有授权部分的普通统一资源标志符语法：协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志

同源策略(Same origin policy)

所谓同源是指域名，协议，端口相同。浏览器执行javascript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行。

Ajax跨域请求问题

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

1.Chrome浏览器

–allow-file-access-from-files –disable-web-security

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –allow-file-access-from-files –disable-web-security

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –disable-web-security -user-data-dir=D:\MyChromeDevUserData

2.Chrome扩展程序

–Allow-Control-Allow-Origin

3.JSONP

–JSONP 是一种非官方跨域数据交互协议，类似接头方式，是信息交换的约定方法

–JSONP由两部分组成：回调函数和数据。回调函数是响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。

–它的原理在于浏览器请求 script 资源不受同源策略限制，并且请求到 script 资源后立即执行。

10.动态script标签（Dynamic Script Tag）

–动态脚本注入

–script标签可以加载并执行其他域的javascript，通过script标记来动态加载其他域的资源。

4.Flash URLLoader

–crossdomain.xml

5.iFrame/window.name

–ifr.contentDocument

ifr.contentWindow.document;

–当该window的location变化，然后重新加载，它的name属性可以依然保持不变。

6.CORS – Cross-Origin Resource Sharing (跨域资源共享)

–Access-Control-Allow-Origin:* : 表明它允许所有域发起跨域请求

–Access-Control-Allow-Methods:POST,GET,PUT,DELETE : 表明它允许GET、POST、PUT、DELETE的外域请求

–Access-Control-Allow-Headers:x-requested-with,content-type: 表明它允许跨域请求包含content-type头

–Access-Control-Max-Age: 3628800 : 表明在3628800秒内，不需要再发送预检验请求，可以缓存该结果

–被认可的跨域解决方案

–它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

–首先来说 CORS 需要浏览器和服务端同时支持的，对于兼容性来说主要是ie10+，其它现代浏览器都是支持的。

–通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求

–CORS标准强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request)，从而获知服务器端对跨源请求所支持 HTTP 方法。

–x-requested-with用来判断客户端的请求是Ajax请求还是其他请求

–jquery.support.cors

–IE8/IE9 —XDomainRequest

–XDR请求都是异步的，不能用它来创建同步请求。请求返回之后，会触发load事件，响应数据也会保存在responseText属性中。

7.CSRF – Cross-Site Request Forgery (跨站点请求伪造)

–未被授权系统有权访问某个资源

8.[HTML5] postMessage

–跨文档消息传输（Cross Document Messaging）

–postMessage的作用就是传递数据

–onmessage的作用就是接收数据

windowObj: 接受消息的 Window 对象。

message: 在最新的浏览器中可以是对象。

targetOrigin: 目标的源，* 表示任意。

8.document.domain

–相同主域，子域不同的页面交互信息，可以通过设置document.domain的办法来解决。

–前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致。

9.图像Ping

–图像Ping是与服务器进行简单、单项的跨域通信的一种方式

11.Nginx反向代理

<pre>
    <code>
        location ~ ^/fund-app/.*$ {
            default_type text/plain;
            proxy_pass http://172.18.11.82:8083$request_uri;
        }

        location ~ ^/fund-web-app/.*$ {
            default_type text/plain;
            proxy_pass http://172.18.11.82:8080$request_uri;
        }
    </code>
</pre>

–nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。

–又通过重写url，欺骗了真实的服务器，让它以为这个http请求是直接来自于用户浏览器的。

12.CSST (CSS Text Transformation)

一种用 CSS 跨域传输文本的方案。相比 JSONP 更为安全，不需要执行跨站脚本。

原理：通过读取 CSS3 content 属性获取传送内容。

优点：相比 JSONP 更为安全，不需要执行跨站脚本。

缺点：没有 JSONP 适配广，CSST 依赖支持 CSS3 的浏览器。

13.add CORS support to server

–CORS on ExpressJS http://enable-cors.org/server_expressjs.html

–CORS on Meteor http://enable-cors.org/server_meteor.html

–CORS on Nginx http://enable-cors.org/server_nginx.html

–CORS on Tomcat http://enable-cors.org/server_tomcat.html

–CORS on Apache http://enable-cors.org/server_apache.html

–CORS on App Engine http://enable-cors.org/server_appengine.html

Tomcat部署文件服务器，解决跨域问题

调整项目pom.xml文件

     
     <!--解决tomcat部署跨域问题  -->
     <dependency>
         <groupId>com.thetransactioncompany</groupId>
         <artifactId>cors-filter</artifactId>
         <version>2.4</version>
     </dependency>
     <dependency>
         <groupId>com.thetransactioncompany</groupId>
         <artifactId>java-property-utils</artifactId>
         <version>1.9.1</version>
     </dependency>

修改web.xml文件，加入拦截

     <!--解决tomcat部署跨域问题  -->
     <filter>
         <filter-name>CORS</filter-name>
         <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
         <init-param>
             <param-name>cors.allowOrigin</param-name>
             <param-value>*</param-value>
         </init-param>
         <init-param>
            <param-name>cors.supportedMethods</param-name>
             <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
         </init-param>
         <init-param>
             <param-name>cors.supportedHeaders</param-name>
             <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
         </init-param>
         <init-param>
             <param-name>cors.exposedHeaders</param-name>
             <param-value>Set-Cookie</param-value>
         </init-param>
         <init-param>
             <param-name>cors.supportsCredentials</param-name>
             <param-value>true</param-value>
         </init-param>
     </filter>
     <filter-mapping>
         <filter-name>CORS</filter-name>
         <url-pattern>/*</url-pattern>
     </filter-mapping>