vue 开发环境跨域

在开发环境下，页面路径是本地127.0.0.1:8080，然而获取数据时会用的服务器接口，所以就导致了开发环境下的跨域，采用proxyTable配置来解决

1，在config/index.js进行如下配置

    proxyTable: {
      '/api': {
        target: 'https://xxxxxx.com', //后端接口地址
        changeOrigin: true,//是否允许跨越
        pathRewrite: {
            '^/api': '/',//重写,
        }
      }
    },

2，因有封装一个axios请求方法request

import axios from 'axios'
import store from '@/store'

import { Message} from 'element-ui'
import { getToken } from '@/utils/auth'


const service = axios.create({
    baseURL: process.env.BASE_API,   //注意： 因为这里
    timeout: 5000                    // request timeout
})

service.interceptors.request.use(
    config => {
        if (store.getters.token) {
            config.headers['X-Token'] = getToken()  // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
        } 
        return config
    },
    error => {
        Promise.reject(error)
    }
)

service.interceptors.response.use(
    response => response,
    error => {
        Message({
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

export default service

 3，在config/dev.env.js，如此之后就能使之后使用request（）方法的url都是以/api开头了，

module.exports = merge(prodEnv, {

    NODE_ENV: '"development"',

    BASE_API: '"/api/"'  //注意： 所以这里这样

})

4，然后在需要请求数据方法内如下使用就好了

import request from '@/utils/request'

export function fetchList(){
    return request({
        url: '/travel_app/findAllScenic.do',
        method: 'POST'
    })
}

比如后台接口是： https://xxxxxx.comtravel_app/findAllScenic.do

本地页面是： http://127.0.0.1:8080 

跨域处理后就把访问后台的地址改为了：

这样就拿到了服务器上的数据啦