跨域请求的解决方案(三)

跨域请求的第三种解决方案就是换个思路:

将跨域请求转换成同域请求

Vue项目中vue.config.js有这么一段配置:

    devServer: {
        proxy: {
            '^/api': {
                target: 'http://www.apiserver.com',
                changeOrigin: true
            }
        }
    }

这个配置就是将所有以/api打头的请求在服务端反向代理到http://www.apiserver.com中,这样我们在发跨域请求的时候就可以直接请求本域/api了。

上面方案仅对使我们在本地开发测试时候有效,这是为什么呢?

分为几个步骤解释下:

  1. 本地测试,输入命令npm run dev(或npm run serve)

  2. dev命令会用node启动一个web服务,监听一个指定的本机端口,这时本机相当于一台服务器,我们一般常用的端口8080,所以测试网址是:http://localhost:8080

  3. 当请求本域地址,本地web服务就会把这个请求按照proxy设置的规则转发到对应的网址上,并将请求到的内容返回给客户端

上述方式解决了开发时跨域请求的问题,但是打包后却没用。原因在于:这个设置启动了一个本地web服务,我们用build命令打包后的静态文件上传到线上服务器后,这个web服务就不复存在了。

线上一般采用Nginx或者Apache作为web服务器,所以需要在对应配置文件上增加代理规则。

Nginx

    # 在对应的server块下增加如下规则
      location = /api {
        proxy_pass  http://www.apiserver.com
        proxy_set_header Host $host;
        proxy_set_header  X-Real-IP        $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Connection "upgrade";
        proxy_set_header Upgrade $http_upgrade;
    }

Apache

// 哈哈,我也不知道。请移步百度:
Apache 反向代理

缺点

1.需要修改线上服务器配置
2.采用CDN加速后,会产生两次转发

发表评论

电子邮件地址不会被公开。 必填项已用*标注