解决跨域的几种方式

1.document.domain

由于js同源策略的限制，脚本只能读取和所属文档来源相同的窗口和文档属性
对于有公共的上级域名，这些服务器上的页面之间的跨域访问可以通过document.domain来进行

默认document.domain存放的是载入文档的服务器的主机名,可以手动设置这个属性，不过只能设置成当前域名或者上级域名，并且必须要包含一个.号。
举例：
zy.ttdvideo.com 可以设置成ttdvideo.com不能设置成com

注意：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

参考：https://blog.csdn.net/nlznlz/article/details/79506655

2.CROS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。只要服务器实现了CORS接口，就可以跨源通信。

springBoot框架CROS配置

package com.joyware.whistlecloud.config;

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

/**
 * 2019-5-21 15:13
 * 
 * @author guowei
 */
@Configuration
@EnableWebMvc
public class WebMvcConfig extends WebMvcConfigurationSupport {

/*    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedHeaders("Authorization, Content-Type")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }
    */


    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}

CROS常见的header

表明允许” http:/haha.com "发起跨域请求

Access-Control-Allow-Origin: http://haha.com

表明在3628800秒内，不需要再发送预检验请求，可以缓存该结果（上面的资料上我们知道CROS协议中，一个AJAX请求被分成了第一步的OPTION预检测请求和正式请求）

Access-Control-Max-Age: 3628800

表明它允许GET、PUT、DELETE的外域请求

Access-Control-Allow-methods: GET, PUT, DELETE, POST

表明它允许跨域请求包含content-type头

Access-Control-Allow-Header: content-type

表明它允许cookies

Access-Control-Allow-Credentials:true

3.JSONP

利用script标签不受同源策略的影响，动态添加script标签，用于发起跨域请求。
eg1: 普通script标签请求

 <script>
    // getData即是回调函数的名称，传到后台，后台返回数据拿到结果进行相关逻辑操作。
     function getData(res) {
     console.log(res);
  	}

 $(document).ready(function () {
   $("#dom").click(function () {
         //往头部输入一个脚本，该脚本发起一个跨域请求
        $("head").append("<script src='http://localhost:9999/api?callback=getData'></script>");
       });

     });
 </script>

eg2: jquery的jsonp请求

 <script> 
      $(document).ready(function () {
            $("#dom").click(function () {
                $.ajax({
                     url: "http://localhost:9999",
                     // jsonp方式不支持post
                     type: "GET",
                     dataType: "jsonp", //不能少
                     success: function (res) {
            			 console.log(res);
                     }
                 });
            });
         });
 </script>

4.Nginx

目前大多数都是前后端分离，开发环境中跨域的问题是最需要先解决的。
web前台： http://10.100.23.127:8888
后台接口：http://10.100.23.126:9999/api
nginx配置如下

   server {
        listen       80;  # 监听80端口
        server_name  localhost;  #当前服务的域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
		# 代理服务端接口
        location /api/ {
           rewrite  ^/api/(.*)$ /$1 break;
            proxy_pass http://10.100.23.126:9999/;# 代理接口地址
        }
        
		location / {
			proxy_pass http://10.100.23.127:8888;
			root   E:/tms;
			try_files $uri $uri/ @router2;
			index index.html;
		}
 }