前端项目线上如何做跨域

前端项目线上如何做跨域

前端页面被跨域限制了,说明不同源。 这个时候可以找一台跟后台接口同源的服务器用 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 服务器详解》

你可能感兴趣的:(前端项目线上如何做跨域)