1. 程式人生 > >Vue報錯筆記(2):No 'Access-Control-Allow-Origin' header is present on the requested resource.

Vue報錯筆記(2):No 'Access-Control-Allow-Origin' header is present on the requested resource.

這裡寫圖片描述

就是說:當使用ajax訪問遠端伺服器時,請求失敗,瀏覽器報如上錯誤。這是出於安全的考慮,預設禁止跨域訪問導致的

1. 什麼時跨域訪問
舉個栗子:在A網站中,我們希望使用Ajax來獲得B網站中的特定內容。如果A網站與B網站不在同一個域中,那麼就出現了跨域訪問問題。你可以理解為兩個域名之間不能跨過域名來發送請求或者請求資料,否則就是不安全的。跨域訪問違反了同源策略,同源策略的詳細資訊可以點選如下連結:Same-origin_policy;
總而言之,同源策略規定,瀏覽器的ajax只能訪問跟它的HTML頁面同源(相同域名或IP)的資源。

2. 解決

常用的解決方案有兩種,可以分為客戶端解決方案和伺服器端解決方案

  • 客戶端
$(function($){
      var url = 'http://*****/index';
      $.ajax(url, {
        data: {
          'cityname': '成都',
          'date': '2016.12.12'
        },
        dataType: 'jsonp',
        crossDomain: true,
        success: function(data) {
          if(data && data.resultcode == '200'
){ console.log(data.result.today); } } });

將ajax請求中的dataType屬性設定為“jsonp”

  • 伺服器端
    在伺服器端的filter或者servlet裡面新增
response.setHeader("Access-Control-Allow-Origin", "*"); 

“Access-Control-Allow-Origin”表示允許跨域訪問,“*”表示允許所有來源進行跨域訪問,這裡也可以替換為特定的域名或ip。
很顯然,這種方式對非網站擁有人員來說是不能做到的。而且此種方式很容易受到CSRF

攻擊。

原文連結