跨域

一、跨域概念

　　跨域是指瀏覽器不能執行其餘網站的腳本。它是由瀏覽器的同源策略形成的,是瀏覽器對JavaScript實施的安全限制

　　同源：協議、域名、端口都要同樣，有一個不同就存在跨域

 

二、cors跨域

　　特色：後端配置，開發、上線均不影響

　　在後端設置以下請求信息

　　Access-Control-Allow-Origin ：  容許請求源    // *全部訪問地址，也能夠設置具體地址

　　Access-Control-Allow-Methods：  容許請求方法   // get、post、put、delete、options

　　Access-Control-Allow-Headers：  容許帶的請求頭  // 表示請求時必須攜帶的請求頭

　　跨域請求首先會發送options試探請求

 

三、nginx中間代理

　　特色：能夠前端配置，能夠運維配置，能夠後端配置，配置簡單，性能高

　　（1）下載nginx

　　（2）修改配置文件：nginx/conf/nginx.conf

　　找到帶有proxy_pass的server對象進行修改

 

四、jsonp

　　特色：利用script標籤不跨域的特色，

　　（1）前端發送jsonp，須要帶上回調函數

　　（2）後端返回數據，必須把數據寫在回調裏面

　　（3）前端拿到返回值（實際上是一個回調函數，參數是數據），再執行這個函數

　　示例：node.js

　　　　後端：

　　　　　　app.get( "/api/jsonp', function( req, res ){

　　　　　　　　var  data  =  { name: "test" }

　　　　　　　　data  =  JSON.stringify(data)

　　　　　　　　var  callback  =  "handleresponse(" +  data  +  ")"

　　　　　　　　res.send(callback)

　　　　　　})

　　　　前端：

　　　　　　function  getJsonp(){

　　　　　　　　$.ajax({

　　　　　　　　　　url: "http://localhost:3000/api/jsonp",

　　　　　　　　　　data: { name: "xxx},

　　　　　　　　　　dataType: "jsonp",

　　　　　　　　　　jsonpCallback: "handleresonse"

　　　　　　　　})

　　　　　　}

　　　　　　function  handresponse(data){

　　　　　　　　console.log(data)

　　　　　　}

 　　　　　　getJsonp()