vue中遇到跨域问题

Posted 2021-01-05 orange2013

昨天在vue开发项目中遇到一个坑，遇到了vue的跨域问题，通过多次度娘的查询，最终解决了这个问题，

具体情形如下：新的项目，需要vue的开发，在本地的开发中遇到跨域的问题！

vue中解决跨域问题的三种方法：

1.服务器端添加请求头header

   header(‘Access-Control-Allow-Origin:*‘);//允许所有来源访问 

   header(‘Access-Control-Allow-Method:POST,GET‘);//允许访问的方式 　

2.使用jq的jsonp

methods: {
   getData () {
   var self = this
   $.ajax({
        url: ‘http://f.apiplus.cn/bj11x5.json‘,
        type: ‘GET‘,
        dataType: ‘JSONP‘,
            success: function (res) {
            self.data = res.data.slice(0, 3)
            self.opencode = res.data[0].opencode.split(‘,‘)
        }
   })
  }
}

注：需要引入jq，

首先需要下载依赖

npm install jquery --save-dev

在webpack.base.conf.js文件中加入

   plugins: [

      new webpack.ProvidePlugin({

          $: "jquery",

      jQuery: "jquery"

    })

  ],

在需要的temple里引入也可以在main.js里全局引入

  import $ from ‘jquery‘

3.使用服务器代理的方式（注项目使用vue-cli脚手架搭建）

  首先下载依赖中间件http-proxy-middleware

$ npm install --save-dev http-proxy-middleware

然后打开config/index.js,在proxyTable中添写如下代码：

proxyTable: {
      ‘/‘: {
        target: ‘http://192.168.2.18:8080‘, // 你请求的第三方接口
        changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: { // 路径重写，
          ‘^/‘: ‘‘ // 替换target中的请求地址，也就是说以后你在请求http://jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
        }
      }
    },

在下载一个一个依赖qs的模块，解决post过程中不能识别data的问题

$ npm install --save-dev q

在api.js或者.vue中设置

//axios
import axios from ‘axios‘;
let base =  window.location.protocol + "//" + window.location.host;
let qs=require(‘qs‘);
axios.defaults.headers[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘;
// 超时时间（请求超过时间，出现提示）
axios.defaults.timeout = 5000;
//设备详情信息
export const getEquipmentDetails = params => { return axios.post(`${base}/meis/a/smart/sysModel/ajaxGetDeviceDetaill`,qs.stringify( params)).then(res => res.data); };

在header.vue中调用

import { getEquipmentDetails } from ‘../api/api‘;
    export default {
    data(){
      return{
        deviceId:"",
        deviceMark:"",
        deviceName:"",
        deviceSection:"",
        deviceCode:""
      }
    },
    methods:{
      equipmentDetails(){
        //加载设备详情
        let deviceId = this.$utils.getUrlKey("deviceId");
        let params = {id:deviceId};
        getEquipmentDetails(params,{
          headers:{
            token:sessionStorage.getItem("token")
          }
        }).then(data=>{
          // console.log(data);
          this.deviceName = data.name;
          this.deviceCode = data.code;
          this.deviceSection = data.section;
          this.deviceMark = data.name?data.name.substring(0,1):"";
        })
      }
    },
    watch: {
      ‘$route‘ (to, from) {
        let deviceId = this.$utils.getUrlKey("deviceId");
        let params = {id:deviceId};
        this.equipmentDetails();
      }
    },
    mounted(){
      this.equipmentDetails();
    }

  }

正常的调用就可以，注意一定要调用qs，否则post带参数的时候请求会报错500的错误！

注意：打包发布版本的时候将api.js的

axios.defaults.headers[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘; 

设置为

axios.defaults.headers[‘Content-Type‘] = ‘application/json‘;