vue前端代理解决跨域

原理

造成跨域是因为request url的host与我们的origin不一致,也就是常说的,非同源,通过配置代理,我的请求变成了从192.168.1.109:8080(这是我本地的ip,解释一下)向192.168.1.109:8080请求数据,则解决了非同源的问题。

方法

// 在根目录下自行创建vue.config.js
module.exports = {
  // cli3 代理是从指定的target后面开始匹配的,不是任意位置;配置pathRewrite可以做替换
  devServer: {
    port: '8080',
    open: true,
    proxy: {
      '/api': {
        // /api 的意义在于,声明axios中url已/api开头的请求都适用于该规则,
        // 注意是以/api开头,即:axios.post({url: '/api/xxx/xxx'})
        target: '服务器真实地址',
        // 此处target的意义在于:造成跨域是因为访
        // 问的host与我们的请求头里的origin不一致,所以我们要设置成一致,这个具体请看下文
        changeOrigin: true,
        pathRewrite: {'^/api': 'https://我是服务器/api'}
        // 此处是大部分文章都不会明说的的地方,
        // 既然我们设置了代理,则所有请求url都已写成/api/xxx/xxx,那请求如何知道我们到底请求的是哪个服务器的数据呢
        // 因此这里的意义在于, 以 /api开头的url请求,代理都会知道实际上应该请求那里,
        // ‘我是服务器/api’,后面的/api根据实际请求地址决定,即我的请求url:/api/test/test,被代理后请求的则是
        // https://我是服务器/api/test/test
      }
    }
  }
}
  1. target是你要代理的域名,必须要加上http/https。
  2. 这里用'/api'代替target里面的地址,组件中调用接口时直接用'/api'代替。比如我要调用'https://xxx.com/news.直接写'/api/news'即可

实例

开发环境解决跨域

在根目录下新建vue.config.js

module.exports = {
    devServer: {
        //使用代理进行解决跨域的问题
        proxy: {
            '/api2': {
                target: 'http://localhost:3000',
                changeOrigin: true,
                pathRewrite: {'^/api2': ''}
            },
            '/api': {
                target: 'http://39.97.33.178',
                changeOrigin: true,
                pathRewrite: {'^/api': ''}
            }
        }
    }
}

生产环境解决跨域

配置nginx,找到nginx的配置文件 nginx.conf ,它的路径是 /etc/nginx/nginx.conf

server {
        listen       8000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        location /api {
            proxy_pass https://www.baidu.com;  #代理的域名
            add_header 'Access-Control-Allow-Origin' '*'; 
            add_header 'Access-Control-Allow-Credentials' 'true'; 
        }
        location  / {
            root   /var/www/vue/;
            index  index.html index.htm;
        }
    }
  • https://www.baidu.com 是我们要代理域名

  • add_header 是增加返回头 解决跨域问题

  • 注意:vue项目在请求域名的前面就要加上“/api”字符串,请求示例如下

    test.post('/api/product/getData',params)
    

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×