描述問題

項目中表格需要一些數據，於是前端自己寫好了一個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項目跨域問題