vue项目跨域问题

Posted 2020-12-28 lml-lml

描述问题

项目中表格需要一些数据，于是前端自己写好了一个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
            })
        },