VUE-cli跨域 proxyTable_孟小欢的专栏文章_微信文章

一、什么是跨域

浏览器有同源策略的限制，所以不是同源的脚本不能被访问，即不能跨域名访问。

所以为了实现跨域，前后端都有很多解决的办法，这里我们就来解决webpack下vue的跨域问题。

二、webpack下vue跨域需要配置ProxyTable

1. 增加ProxyTable配置

在vue工程下的config -> index.js -> module.exports -> dev里增加

proxyTable: {
  '/visit':{
    target: process.env.API_ROOT, //接口域名
    changeOrigin: true, //是否跨域：开启代理，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
    pathRewrite: { //代理
    '^/visit':'/visit'  //https://XX.XX.XX/visit/
    //'^/api': '/api'   //http://XX.XX.XX.XX:8083/api/login
    //'^/api': '/'      //http://XX.XX.XX.XX:8083/login
    }
  }
},
复制代码

2. 根据开发和生产环境配置不同地址

开发环境

在vue工程下的config -> dev.env.js -> module.exports 修改API_ROOT

生产环境

在vue工程下的config -> prod.env.js -> module.exports 修改API_ROOT

配置完成后需要重新编译一遍

三、接口访问

1. 在api.js里增加接口地址

import { get, post } from '../request/http';
const api={
  getScreenList:'/getScreenList', //接口名称
}
export default api
export const getScreenList = params => get(api.getScreenList, params);
复制代码

2. 利用promise访问接口

import { getScreenList} from '@/request/api';

export default {
    mounted(){
      console.log('测试--')
      this.getScreenList();
    },
    methods:{
      async getScreenList(){
        let params={};
        await getScreenList(params).then(res => {
          console.log('访问成功');
        })
      }
    },
}
复制代码

VUE-cli跨域 proxyTable

正文