vue專案跨域問題

cors 這個方案缺點是 ie6 7 相容不好（倒是不見得要相容）。需要b**在響應中加頭

postmessage 缺點也是 ie6 7 相容不好（倒是不見得要相容）。需要修改b**的**

iframe window.name 傳值得方式很巧妙，相容性也很好。但是也是需要你能修改b****

服務端主動請求b**，相容性好而且你客戶端的**還是原來的ajax，缺點是感覺不好。（伺服器端是不存在跨域安全限制的）

類似5 用nginx把b**的資料url反向**。

2 res.header("access-control-allow-origin", "*");

3 res.header("access-control-allow-headers", "content-type,content-length, authorization, accept,x-requested-with");

4 res.header("access-control-allow-methods","put,post,get,delete,options");

5 res.header("x-powered-by",' 3.2.1')

6 7 if(req.method=="options") res.send(200);/*讓options請求快速返回*/

8 else next();

9 });

1 port: 8080,
2 proxytable: 
10 },
11 },

描述問題

專案中**需要一些資料，於是前端自己寫好了乙個json檔案，自己模擬後端請求介面，然後封裝api，在自己的頁面請求資料

封裝api在部署時遇到的跨域問題

專案一般都分三種環境，開發測試生產，三個環境的ip或者網域名稱是不一樣的。這就需要咱們走不同的ip，之前是結合vue+webpack打包，配置哪個環境走哪個ip下面。第一次是部署到ip下面，我就把ip寫成和位址列一樣的ip就不存在跨域問題了，相當於是在乙個ip下，但是後端將ip重寫為網域名稱後又發生了跨域問題，乙個ip對應四個網域名稱，之前的方法自然不能採用，於是就把ip乾掉，讓他都走瀏覽器的當前網域名稱就可以了。獲取方法是var domain = document.domain;

json檔案的寫法和存放

}api封裝的寫法

var base = $:$

const apisetting = /static/data/news.json,//這個是之前分環境走打包

}export default apisetting

頁面呼叫的方法

//html部分
}td>
}td>
}td>
td>
tr>
import apisetting from '@/api' //引入api
created() )
}**至：

vue專案跨域問題

vue 跨域問題

vue跨域問題

專案跨域問題

vue專案跨域問題

vue 跨域問題

vue跨域問題

專案跨域問題

相關推薦