問題說明

當出現上圖這個的時候，是訪問請求外域URL無法訪問，瀏覽器認為訪問外域URL不安全，導致訪問不了簡稱跨域問題。而這上面出現一句很重要的話“NO Access-Control-Allow-Origin”，這個是什麼？是不是隻要新增“Access-Control-Allow-Origin”頭就能訪問呢？如何新增？會不會有其他問題？

Access-Control-Allow-Origin 表示允許訪問的外域 URI

例子：
Access-Control-Allow-Origin: http://www.a.com
允許訪問www.a.com站點

Access-Control-Allow-Origin: *
“*”允許訪問任何外域URL

這個是由服務端那邊設定的，讓服務端告知瀏覽器允許這個站點訪問。那就是說只要設定了這個引數，那就能跨域了。而這種跨域方式也就叫CORS。

CORS是一個W3C標準，全稱是”跨域資源共享”（Cross-origin resource sharing）。
它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。本文就是談CORS技術實現。

技術介紹

當我們出現跨域提示的時候，其實我們已經向伺服器已經完成一次傳送和接收請求（請求是傳送連線的url）。伺服器接收請求後通知瀏覽器，告訴瀏覽器不能訪問外域站點。瀏覽器會顯示不能訪問原因，顯示訪問外域失敗。

而CORS就是在伺服器上，設定Response Headers 返回引數Access-Control-Allow-Origin,Access-Control-Allow-Headers,Access-Control-Allow-Methods，讓站點能訪問外域。

如何操作

1.看到下圖我們傳送請求的時候 在Request Headers 中Origin:http://www.a.com，Origin是我們當前站點URL域名。

2.Nginx伺服器接收後會檢視是不是配置CORS，如果是檢視配置的域名是不是匹配如下圖：http://www.a.com，匹配允許這個站點訪問。

3.使用CORS傳送請求，第一個請求會是”OPTIONS”這個是設定返回頭並且返回成功。之後會自動再發一個post/get請求，成功傳送到伺服器。這樣程式碼以及可以成功跨域了。

4.最後在看一下Response Headers 發現Access-Control-Allow-Origin設定http://www.a.com的域名了。代表已經成功設定好CORS了。

相容性

pc相容ie8以上，手機端上隨意用。如果想相容更低版本瀏覽器請使用JSONP或者Nginx做代理。

Nginx配置程式碼

在Nginx中的nginx.cof中新增下面程式碼就可以實現CORS跨域了。

set $origin '*';#寫入需要跨域的請求地址
if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' $origin;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
    return 204;
}

if ($request_method = 'POST') {
    add_header 'Access-Control-Allow-Origin' $origin;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}

if ($request_method = 'GET') {
    add_header 'Access-Control-Allow-Origin' $origin;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}

Springboot配置程式碼

@Configuration
public class CorsConfig {
    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        // 設定你要允許的網站域名，如果全允許則設為 *
        config.addAllowedOrigin("http://localhost:4200");
        // 如果要限制 HEADER 或 METHOD 請自行更改
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        // 這個順序很重要哦，為避免麻煩請設定在最前
        bean.setOrder(0);
        return bean;
    }
}

Node express配置程式碼

var app = express();

//設定跨域訪問
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});
app.listen(6064);