前端项目线上如何做跨域

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