## 何為跨域 跨域，指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript施加的安全限制。 所謂同源是指，域名，協議，端口均相同，舉個栗子： **http://www.123.com/index.html 調用 http://www.123.com/server.json （非跨域）** **http://www.123.com/index.html 調用 http://www.456.com/server.json ?（主域名不同:123/456，跨域）** **http://abc.123.com/index.html 調用 http://def.123.com/server.json （子域名不同:abc/def，跨域）** **http://www.123.com:8080/index.html 調用 http://www.123.com:8081/server.json （端口不同:8080/8081，跨域）** **http://www.123.com/index.html 調用 https://www.123.com/server.json （協議不同:http/https，跨域）** 請注意：localhost和127.0.0.1雖然都指向本機，但也屬于跨域。 ## 如何解決 ### Gateway配置 gateway為API網關，所有請求的閘口，只需在gateway這一層設置允許跨域即可 ~~~ @Configuration public class RouterFunctionConfiguration { /** * 這里為支持的請求頭，如果有自定義的header字段請自己添加 */ private static final String ALLOWED_HEADERS = "blade-auth, Content-Type, Authorization"; private static final String ALLOWED_METHODS = "*"; private static final String ALLOWED_ORIGIN = "*"; private static final String ALLOWED_EXPOSE = "*"; private static final String MAX_AGE = "18000L"; @Bean public WebFilter corsFilter() { return (ServerWebExchange ctx, WebFilterChain chain) -> { ServerHttpRequest request = ctx.getRequest(); if (CorsUtils.isCorsRequest(request)) { ServerHttpResponse response = ctx.getResponse(); HttpHeaders headers = response.getHeaders(); headers.add("Access-Control-Allow-Headers", ALLOWED_HEADERS); headers.add("Access-Control-Allow-Methods", ALLOWED_METHODS); headers.add("Access-Control-Allow-Origin", ALLOWED_ORIGIN); headers.add("Access-Control-Expose-Headers", ALLOWED_EXPOSE); headers.add("Access-Control-Max-Age", MAX_AGE); headers.add("Access-Control-Allow-Credentials", "true"); if (request.getMethod() == HttpMethod.OPTIONS) { response.setStatusCode(HttpStatus.OK); return Mono.empty(); } } return chain.filter(ctx); }; } } ~~~ ### Nginx配置（推薦） 核心思想就是通過nginx或者其他反代工具，將本是跨域的接口地址代理到本地，再調用本地代理后的地址，即可解決跨域問題。 ~~~ server { listen 80; server_name blade; root /usr/share/nginx/blade; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { } location /api{ proxy_pass http://demo.springblade.org/api/web; add_header Cache-Control no-store; } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } ~~~ ### 總結 * 從gateway配置跨域固然方便，配置一次，其他所有請求都支持了，但是這樣會或多或少影響系統的性能，深一層次想，這其實并不是服務端該做的事情 * Nginx配置反代的模式，雖然看上去麻煩，需要每個地方都配置跨域，但是由于nginx的高性能，將API反向代理后，并不會有明顯的損耗，同時也變相降低了服務端的壓力。所以推薦使用Nginx或其他反代工具來解決跨域問題。