vue項目跨域問題
阿新 • • 發佈:2018-08-07
ati 理財產品 收入 服務 proc 證券 產品 tin 新的
描述問題
項目中表格需要一些數據,於是前端自己寫好了一個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 }) },
vue項目跨域問題