前端项目线上如何做跨域

前端项目线上如何做跨域

前端页面被跨域限制了，说明不同源。 这个时候可以找一台跟后台接口同源的服务器用 nginx 来做接口转发。

以一个 vue 项目为例，在开发过程中，开发者可以主动去配合 dev 的 proxyTable， 本质上是本地起了一个 node 服务（express）来做转发到 localhost， 因为跨域是会存在于浏览器。 而发布到线上去之后，很可能由于 dev 环境下对每一个接口请求都携带了 /api 前缀，这对我们很友好。

nginx 配置：

...
location /api {
    # 配置一
    proxy_pass http://abc.hahah.com/;
    # 配置二
    proxy_pass http://abc.hahah.com;
    # 配置三
    proxy_pass http://100.200.30.20;
}
...

其中配置二和配置三，本质上是一样的（使用 ip 和域名）ip 后面有没有 / 是由区别的，有 / 表示转发请求之后，/api 后面的内容才会被转发，相当于 url 是被截断的，正好我们需要这种形式，因为 /api 是我们添加的虚拟的 url 部分。

详情可以参考 https://www.cnblogs.com/lemon-le/p/7800879.html 或者 《nginx 高性能 Web 服务器详解》