vue解决本地开发环境的跨域问题

前言： 由于浏览器的同源策略，我们在使用vue做前后端分离项目开发时，ajax异步请求无法完成。这里的解决方案是通过我们本地开发环境的web服务代理我们的Ajax请求。需要我们做如下配置即可：

• 在我们项目的根目录下添加一个文件： vue.config.js
• 添加代码：

module.exports = {
    
    
  devServer: {
    
    
    // 配置代理核心代码 -- start
    proxy: {
    
    
      "/api": {
    
    
        target: 'http://www.baidu.com',   
        changeOrigin: true,
        pathRewirte: {
    
    
          // 这里是追加链接,比如真是接口里包含了 /api,就需要这样配置.
          '/^api': 'api/',
          // 等价于 
          // step 1  /api = http://localhost:54321/
          // step 2 /^api = /api + api == http://localhost:54321/api
        },
        logLevel: "debug",
      },
    },
    // 配置代理核心代码 -- end

    port: 8080,
  },
};

• 请求地址：
  我们请求：http://localhost:54321/api/getSomething 就会被代理为：http://www.baidu.com/api/getSomething