vue項目跨域問題

跨域

瞭解同源政策：所謂"同源"指的是"三個相同"。

• 協議相同
• 域名相同
• 端口相同

解決跨域

1. jsonp 缺點：只能get請求 ，須要修改B網站的代碼
2. cors 這個方案缺點 是 ie6 7 兼容很差（卻是不見得要兼容）。須要B網站在響應中加頭
3. postMessage 缺點也是 ie6 7 兼容很差（卻是不見得要兼容）。須要修改B網站的代碼
4. iframe window.name 傳值得方式很巧妙，兼容性也很好。可是也是須要你能修改B網站代碼
5. 服務端主動請求B網站，兼容性好並且你客戶端的代碼仍是原來的ajax，缺點是感受很差。（服務器端是不存在跨域安全限制的）
6. 相似5 用nginx把B網站的數據url反向代理。

node， express 解決跨域

• 加上請求頭：

1 app.all('*', (req, res, next)=>{
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 });

 

重點說一下vue-cli處理跨域

• 先後端分離的項目，經常開發的時候，請求的接口地址存在跨域問題
• webpack 先後端分離開發接口調試解決方案，proxyTable解決方案
• 首先要在項目目錄中找到根目錄下config文件夾下的index.js文件。因爲咱們是在開發環境下使用，天然而然是要配置在dev裏面：

 1 port: 8080,
 2 proxyTable: {
 3   '/api': {
 4     target: 'http://www.ainyi.com',  // 目標接口域名
 5     changeOrigin: true,  // 是否跨域
 6     // secure: false,  // 若是是https接口，須要配置這個參數
 7     pathRewrite: {
 8       '^/api': ''   // 重寫接口，通常不更改
 9     }
10   },
11 },

 

• '/api' 爲匹配項，target 爲被請求的地址
• 以上代碼表示：只要是http://www.ainyi.com/api的接口，都將被本地8080端口的請求代理：

  http://localhost:8080/api ===> http://www.ainyi.com/api

• 也就是說，想請求接口http://www.ainyi.com/api，就是經過http://localhost:8080/api代理訪問，就不會產生跨域。
• 這樣就不須要在axios配置axios.defaults.baseURL，全部接口都由本地代理了。

 

　　

描述問題

項目中表格須要一些數據，因而前端本身寫好了一個json文件，本身模擬後端請求接口，而後封裝api，在本身的頁面請求數據

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

項目通常都分三種環境，開發測試生產，三個環境的ip或者域名是不同的。這就須要我們走不一樣的ip，以前是結合vue+webpack打包，配置哪一個環境走哪一個IP下面。第一次是部署到ip下面，我就把ip寫成和地址欄同樣的ip就不存在跨域問題了，至關因而在一個IP下，可是後端將ip重寫爲域名後又發生了跨域問題，一個ip對應四個域名，以前的方法天然不能採用，因而就把ip幹掉，讓他都走瀏覽器的當前域名就能夠了。獲取方法是var domain = document.domain;

json文件的寫法和存放

{
    "jobs": [{ "id": 1, "name": "保險合夥人團隊負責人", "experience": "1年", "number": "2人", "duty": [ "組建並管理金融營銷團隊，負責員工的招聘、培訓以及業務目標的設定與達成。", "負責爲高端我的客戶和企業客戶提供全方位理財諮詢、建議服務，並制定相應的金融產品組合和投資理財策略。", "經過與客戶溝通，瞭解客戶的理財需求，爲客戶進行測算並量身定製理財方案，達到客戶滿意。", "根據客戶的委託，幫助客戶實施並簽定（信託、證券、銀行、保險）等理財產品的購買計劃，完成並實施客戶的理財需求。", "負責對公司綜合金融理財產品的全力宣傳、推廣、銷售。", "負責與公司原有的重要貴賓級客戶保持良好的關係，經過與客戶溝通，及時瞭解客戶需求並調整客戶的財務安排，減小客戶流失。 ", "創建和擴展客戶網絡，以探索新的業務機遇。", "增強客戶服務意識，成功發展客戶的介紹來源，拓展客戶渠道。", "經過交叉銷售、客戶推薦、主動升級銷售、我的業務關係等方式，得到新客戶和拓展新的業務。" ], "status": [ "25歲-45歲，本科及以上學歷 （3年以上工做經驗可大專學歷）", "具備必定的金融基礎知識；", "具備普遍的高端客戶資源和金融營銷經驗；", "具備較強的溝通能力和客戶開發能力；", "具備很強的工做責任心和良好的人際關係；", "具備較強的團隊合做精神，能承受必定的工做壓力。", "熱愛金融銷售工做，具有職業經理人形象，陽光、開朗、有激情，有朝氣；有韌性；", "有清晰的職業生涯規劃，目標明確，敢於挑戰自我，不甘平庸，追求高品質生活，渴望成功。", "具有信託、證券、銀行、保險、第三方理財機構等經驗優先！", "具有房地產、醫療、高爾夫、高端會所、會籍顧問等經驗優先！" ], "pay": [ "公司爲員工提供完善優厚有競爭力的薪酬福利，多元化的收入來源(多達30項)上不封頂.。", "初級銷售經理年薪在10萬-30萬,", "中級銷售經理年薪在30萬-80萬,", "高級銷售經理年薪已達到80萬-200萬並向更高發展！" ] }], }

api封裝的寫法

var base = ${process.env.HOST}:${process.env.PORT}
const ApiSetting = {
news: /static/data/news.json,//這個直接直接瀏覽器域名走（至關於不用配置）
news: ${base}/static/data/news.json,//這個是以前分環境走打包
}
export default ApiSetting

頁面調用的方法

<tr v-for="item in jobs">//html部分 <td>{{item.name}}</td> <td>{{item.number}}</td> <td>{{item.experience}}</td> <td> <router-link :to="{name: 'hiredetails',query: {id: item.id}}">查看詳情 </router-link> </td> </tr> import ApiSetting from '@/api' //引入api created() { this.$ajax.get(ApiSetting.news)//調用靜態json文件 .then(res => { console.log(res.data) this.jobs = res.data.jobs }) }轉載至：https://www.cnblogs.com/lml-lml/p/9438754.html　　　　https://www.cnblogs.com/ainyi/p/9335952.html