Vue跨域：解决Vue项目跨域问题

解决Vue项目开发过程中的跨域问题

问题分析：

在开发过程中我们远程访问发起http请求时可能会遇到跨域问题，虽然服务器能够开了防跨域，但是vue的项目还是请求不到数据，遇到跨域的问题，如图。

解决方法

• 新建config配置文件
  在vue cli2之前使用脚手架搭建的项目，自带了一个config的配置文件，但是在vue-cli3之后，就没有这个配置文件了。所以想要配置，就必须在根文件夹下新建一个名字为 vue.config.js 的文件。（注意：名字必须一样）
• 配置相关值
  首先在配置文件 vue.config.js 中配置端口号：8080，这个可以自定义。然后本地的配置localhost，然后配置服务器的访问地址，和允许跨域等参数。

  module.exports = {
    lintOnSave:false,
    devServer: {
      host: 'localhost',
      port: '8080',
      https:false,
      hotOnly:false,
      proxy: {
        "server": {
          target: 'http://api.myxy99.cn/',
          ws: true,
          changeOrigin: true,
          pathRewrite: {
            '^/server': ''
          }
        }
      }
    }
  }
  

• 下载插件
  因为在之前开发项目。一直使用的是一些防跨域的插件，所以这次也为大家推荐这个插件。这个插件是chrome商场自带的插件，所以直接下载就可以使用了，下载链接: Allow CORS。直接下载下来不用解压，直接拖到chrome的拓展程序中就可以了。
  
  然后在使用的时候直接点亮它就好了。