Vue打包上线后的跨域问题处理

由于开发环境和生产环境的不同，会导致vue访问出现跨域的问题。

一、开发环境跨域问题

1.config/index.js文件配置代理，找到proxyTable字段，如下面一样配置
 

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/xxx': {
        target: 'http://xxx/api', //访问的接口1
        changeOrigin: true,
        pathRewrite: {
          '^/xxx': '/'
        }
      },
      '/yyy': {
        target: 'http://yyy/api', //访问的接口2
        changeOrigin: true,
        pathRewrite: {
          '^/yyy': '/'
        }
      },
    },

配置好后 访问的url就不用再其他地方带上域名了。这个只适合开发环境使用，因为开发环境的本地服务器，以及做好了代理的功能，无需去多余的操作。

二.生产环境跨域问题

Nginx服务后端配置

        location /api/geocoder/ {
			#limit_conn perip 2;
			#limit_rate 100K;
			add_header 'Access-Control-Allow-Origin' '*';