vue解决跨域问题

vue跨域问题解决

一、开发环境下部署

1.进入config/index.js里,在dev下增加proxyTable配置,可以匹配到/api,将其代理成目标接口host

dev: {
 
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
//
    proxyTable: {
      '/api': {
        target: 'http://192.168.1.111:8080/',//目标接口域名
        changeOrigin: true,//是否跨域
        pathRewrite: {
          '^/api': ''//重写接口,后面可以使用重写的新路径，一般不做更改
        }
      }
    }
//
}

二、生产环境下部署

1.先将项目打包，然后放在服务器nginx配置的目录下

2.配置nginx的反向代理，将nginx作为静态服务器

server {
        listen       83; #监听83端口，可以改成其他端口
        server_name  localhost; # 当前服务的域名(nginx所在服务器域名)
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
            proxy_pass http://localhost:8080;#代理项目部署的地址(这里项目部署在了当前服务器tomcat上,端口8080)
            proxy_redirect default;
        }
 
		location /api { #添加访问目录为/api的代理配置,使以“/api”开头的地址都转到“http://192.168.1.111:8080”上
			rewrite  ^/api/(.*)$ /$1 break;
			proxy_pass   http://192.168.1.111:8080;
        }
}