JSONP方式解決跨域問題，CORS解決跨域問題，基本淘汰，應付面試

JSONP方式解決跨域問題

jsonp解決跨域問題是一個比較古老的方案(實際中不推薦使用),這裡做簡單介紹(實際項目中如果要使用JSONP,一般會使用JQ等對JSONP進行了封裝的類庫來進行ajax請求)

實現原理

JSONP之所以能夠用來解決跨域方案,主要是因為 <script> 腳本擁有跨域能力,而JSONP正是利用這一點來實現。

實現流程

JSONP的實現步驟大致如下：

客戶端網頁添加一個<script>元素，向服務器請求JSON數據，這種做法不受同源政策限制。

function addScriptTag(src) {
 var script = document.createElement('script');
 script.setAttribute("type","text/javascript");
 script.src = src;
 document.body.appendChild(script);
}
window.onload = function () {
 addScriptTag('http://example.com/ip?callback=foo');
}
function foo(data) {
 console.log('response data: ' + JSON.stringify(data));
}; 
 

請求時,接口地址是作為構建出的腳本標籤的src,這樣,當腳本標籤構建出來時,最終的src是接口返回的內容。

服務端對應的接口在返回參數外面添加函數包裹層

foo({
 "test": "testData"
}); 

由於<script>元素請求的腳本，直接作為代碼運行。這時，只要瀏覽器定義了foo函數，該函數就會立即調用。作為參數的JSON數據被視為JavaScript對象，而不是字符串，因此避免了使用JSON.parse的步驟。

使用注意

基於JSONP的實現原理,所以JSONP只能是“GET”請求,不能進行較為複雜的POST和其它請求,所以遇到其他情況,就得參考下面的CORS解決跨域了(所以如今它也基本被淘汰了)

CORS解決跨域問題

實際項目中，後端應該如何配置以解決問題(因為大量項目實踐都是由後端進行解決的)，這裡整理了一些常見的後端解決方案:

PHP後臺配置

PHP後臺得配置幾乎是所有後臺中最為簡單的,遵循如下步驟即可:

• 第一步:配置Php 後臺允許跨域

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

• 第二步:配置Apache web服務器跨域(httpd.conf中)

原始代碼

<Directory />
 AllowOverride none
 Require all denied
</Directory>

改為以下代碼

<Directory />
 Options FollowSymLinks
 AllowOverride none
 Order deny,allow
 Allow from all
</Directory>

Node.js後臺配置(express框架)

Node.js的後臺也相對來說比較簡單就可以進行配置。只需用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')
 //這段僅僅為了方便返回json而已
 res.header("Content-Type", "application/json;charset=utf-8");
 if(req.method == 'OPTIONS') {
 //讓options請求快速返回
 res.sendStatus(200); 
 } else { 
 next(); 
 }
});