跨域问题解决方案
1.跨域现象
有一个前端工程，在浏览器通过http://localhost:8601地址访问前端页面，该页面向后端接口如：http://192. 168. 22. 1:63110发送一个http请求，此时如果不进行操作就会出现以下现象：
chrome浏览器报错如下：
Access to XMLHttpRequest at 'http://localhost:63110/system/dictionary/all' from origin 'http://localhost:8601' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.firefox浏览器报错如下：
已拦截跨源请求：同源策略禁止读取位于 http://localhost:63110/system/dictionary/all 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。状态码：200。2.什么是跨域问题
当浏览器访问一个页面时例如http://localhost:80，此时的 协议、主机、端口，分别是http、localhost、80，那么这个页面中，发的接口请求，这个接口的协议，主机，端口必须和当前的页面的一样，三个都一样才行，才可以访问，否则就会出现上面的跨域现象
比如：
从http://localhost:8601 到 http://localhost:8602 由于端口不同，是跨域。
从http://192.168.101.10:8601 到 http://192.168.101.11:8601 由于主机不同，是跨域。
从http://192.168.101.10:8601 到 https://192.168.101.10:8601 由于协议不同，是跨域。
注意：服务器之间不存在跨域请求。
3.跨域问题原因
这个问题就涉及到了浏览器的 同源策略
通过上面的例子可以知道所谓的同源策略，其实就是 协议，主机, 端口都相同的，才可以互相访问，只要有一个不同，就不能访问的。
浏览器判断是跨域请求会在请求头上添加origin，表示这个请求来源哪里。比如：
GET / HTTP/1.1
Origin: http://localhost:8601服务器收到请求判断这个Origin是否允许跨域，如果允许则在响应头中说明允许该来源的跨域请求，如下：
Access-Control-Allow-Origin：http://localhost:8601如果允许任何域名来源的跨域请求，则响应如下：
Access-Control-Allow-Origin：*知道跨域的原理就容易解决跨域问题了
4.解决方法
4.1 JSONP
通过script标签的src属性进行跨域请求，如果服务端要响应内容则首先读取请求参数callback的值，callback是一个回调函数的名称，服务端读取callback的值后将响应内容通过调用callback函数的方式告诉请求方。
4.2 添加响应头
服务端在响应头添加 Access-Control-Allow-Origin：*
以Java为示例：
package com.han.system.config;
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;
/**
* @description 跨域过虑器
*/
@Configuration
public class GlobalCorsConfig {
/**
* 允许跨域调用的过滤器
*/
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
//允许白名单域名进行跨域调用
config.addAllowedOrigin("*");
//允许跨越发送cookie
config.setAllowCredentials(true);
//放行全部原始头信息
config.addAllowedHeader("*");
//允许所有请求方法跨域调用
config.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}4.3 Nginx代理
由于服务端之间没有跨域，浏览器通过nginx去访问跨域地址。
浏览器先访问nginx提供的地址，例如http://192.168.22.2:7888，获取到响应页面后，页面要跨域访问http://192.168.22.5:8080，此时不能直接跨域访问，而是访问nginx的一个同源地址，比如http://192.168.101.11:7888/api ，通过http://192.168.101.11:7888/api 的代理去访问http://192.168.22.5:8080。
