因為專案需要，目前需要通過react ajax請求，實現請求其它域的登入URL，將使用者寫入到其它域的cookie中，之後herf連線該網址的其他內容的時候，便可直接跳轉到對應內容，無需跳轉到登入頁面。

1、cors和jsonp

何為跨域，及當一個請求url的協議、域名、埠三者之間任意一與當前頁面地址不同即為跨域。在做跨域請求的時候，cors和jsonp我都嘗試過了。

1.1cors

cors（Cross-Origin Resource Sharing 跨源資源共享）。簡單請求時，瀏覽器會直接傳送跨域請求，並在請求頭中攜帶Origin 的header，表明這是一個跨域的請求。伺服器端接到請求後，會根據自己的跨域規則，通過Access-Control-Allow-Origin和Access-Control-Allow-Methods響應頭，來返回驗證結果。如果驗證成功，則會直接返回訪問的資源內容。

1.2jsonp

jsonp（Json with Padding 填充式JSON或引數式JSON），JSONP的基本思想是，網頁通過新增一個<script>元素，向伺服器請求JSON資料，這種做法不受同源政策限制；伺服器收到請求後，將資料放在一個指定名字的回撥函式裡傳回來。
舉一個案例來說明。
假設客戶期望返回JSON資料：["customername1","customername2"]。
如客戶想訪問 : http://localhost:3000?jsonp=callbackfunction。
真正返回到客戶端的資料顯示為: callbackFunction(["customername1","customername2"])。

最後還是採用的cors實現了，jsonp雖然請求成功了，但是針對callback函式，我這邊還沒有解決。

2、cors在後端的配置

2.1 nodejs的配置

//該程式碼所放置的位置需要靠前，如果後端有redirect跳轉連結，則需要將此程式碼放置在redirect前
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*" );//若需要加入withCredentials,則需要將*改為具體域名
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
 

2.2 php的配置

 <?php header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
//主要為跨域CORS配置的兩大基本資訊,Origin和headers

3、react 前端請求

前端若採用ajax請求，get或者post資料，按照正常的方式即可。

 $.ajax({
          //需要跨域的url
            url:"****",
            method: "POST",
            crossDomain:true,
            xhrFields:{withCredentials:true},
            beforeSend:function(xhr){
                xhr.withCredentials=true;
            },
            success: function (data) {
                 console.log(data);
              }.bind(this),
            error: function (xhr, status, err) {
                 console.log(err);
              }.bind(this)
          }); 

4、結束語

利用cors跨域，既可以實現post也可以實現get，若利用jsonp實現跨域，僅可實現get方式的跨域訪問。而且cors方式，僅需要在後端配置，前端照常訪問即可，方式還是比較簡單的。