如何解決跨域問題?

一. 什麼是跨域?

• 因爲瀏覽器同源策略(協議,域名,端口有任何一個的不一樣)的限制,訪問非同源的數據須要進行跨域處理,若是非同源--有三種行爲受到限制:

  • Cookie,LocalStorage沒法讀取
  • DOM和JS對象沒法得到
  • AJAX請求無效(能夠發送,但瀏覽器會拒絕響應)

二. 實現跨域的方式有哪些?

• JSONP
• CORS(服務器端完成,可設置頭信息)
• 使用反向代理服務器來實現跨域請求(服務器端Nginx/Apache完成)

三. JSONP

• 實現原理:

  • 動態建立一個script標籤
  • 將目標數據的地址放到script標籤的src屬性中,並在請求地址中拼接callback參數並攜帶回調函數名
  • 定義回調函數,當數據請求成功以後,回調函數被調用

• JQ封裝的ajax方法跨域請求:

  <script>
  $.ajax({
      type: 'GET',
      url: 'http://localhost:4000/jsonp?callback=?', // ? 能夠理解爲下面的success方法。
      success: function (data) {
          // data就是服務器返回的數據
          console.log(data);
      },
      dataType: 'jsonp' // 必需要指定dataType爲jsonp
  });
  </script>
  
  複製代碼

四. CORS

• Cross Origin Resource Share 跨域資源共享(後端完成)

  • 在服務端響應客戶端的時候,請求頭中帶上Access-Control-Allow-Origin", "*"

  // 設置容許跨域訪問該服務, cors
  app.all('*', function (req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
      res.header('Access-Control-Allow-Headers', 'Content-Type','mytoken');
      next();
  });
  複製代碼