vue 跨域问题

Demo_Null

发布于 2020-09-28 14:47:54

5850

发布于 2020-09-28 14:47:54

文章被收录于专栏：Java 学习Java 学习

1.1 开发环境

在 config/index.js 修改 proxyTable，高版本 vue-cli 的项目在 根目录/vue.config.js 中修改 proxy

1.1.1 proxyTable

proxyTable: {
  // 可以有多个
  '/api': {
    target: 'http://47.103.4.205:6666/',  // 目标接口域名, 注意加 http
    changeOrigin: true,  // 是否跨域
    pathRewrite: {
      // 这里理解成用 '/api' 代替 target 里面的地址，后面组件中我们掉接口时直接用 api 代替 
      // 比如我要调用 'http://47.103.4.205:6665/user/add'，直接写 '/api/user/add' 即可
      '^/api': '/'
    }
  },
},

1.1.2 使用

// '/api' 不能忘，用它来匹配
// http://localhost/api/user/add 本地项目地址就转换成 http://47.103.4.205:6666/user/add
axios.get('/api/user/add').then(res => { 
	console.log(res)
})

1.2 生产环境

将 vue 项目打包发布后，发现之前的代理配置失效了，这是因为 vue proxy 只能在开发环境使用(很蛋疼~)，我们可以使用 nginx 在完成跨域。nginx 怎么安装就不再说了，直接上配置。

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

		# 这个是重点
		location /api {
            rewrite ^.+api/?(.*)$ /$1 break;
			proxy_pass http://47.103.4.205:6666/api;
        }
    }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-07-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js