Vue 访问第三方API跨域问题

Vue访问第三方API时会出现跨域问题,解决方法是在项目目录中congfig文件夹下
index.js文件中proxyTable配置代理。例如:

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //此处配置代理 
    proxyTable: {
      '/api': {
        target: 'http://api.map.baidu.com/geocoder/v2', //访问地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
      '/direction': {
        target: 'http://api.map.baidu.com/direction/v2/transit',
        changeOrigin: true,
        pathRewrite: {
          '^/direction': '/'
        }
      },
    },

在项目中就可以使用访问代替:
‘http://api.map.baidu.com/geocoder/v2’接口时可以使用‘/api’代替,
'http://api.map.baidu.com/direction/v2/transit’接口时可以使用‘/direction’代替


import {getHttp} from "../common/httpAxios.js";

export function getAddress(params,successCallBack, errorCallBack) {
 // 此处使用的是get请求,参数传递params
  let url = '/api/';
  getHttp(url, params ,successCallBack ,errorCallBack);
}
export function getBusDirection(params , successCallBack, errorCallBack) {
   let url = '/direction';
   getHttp(url, params ,successCallBack ,errorCallBack);
}

你可能感兴趣的:(Vue)