前言
在开发静态页面时, 类似 vue 的应用, 我们常会调用一些接口, 这些接口极可能是跨域, 然后浏览器就会报 cross-origin 问题不给调.
最简单的解决方法, 就是把浏览器设为忽略安全问题, 设置 --disable-web-security. 不过这种方式开发 PC 页面到还好, 如果是移动端页面就不行了.
解决办法
使用 Nginx 转发请求. 把跨域的接口写成调本域的接口, 然后将这些接口转发到真正的请求地址.
举个栗子
例如我们在开发一个 Vue 应用.
原先:
调试页面是: http://192.168.1.100:8080/
请求的接口是: http://ni.hao.sao/api/get/info
步骤一:
请求的接口是: http://192.168.1.100:8080/api/get/info
PS: 这样就解决了跨域问题.
步骤二:
安装好 Nginx 后, 去到 / usr/local/etc/nginx / 目录 (这是 Mac 的), 修改 nginx.conf 文件.
步骤三:
把默认的 server 配置注释掉.
在下面增加:
- server{
- listen 8888;
- server_name 192.168.1.100;
- location /{
- proxy_pass http://192.168.1.100:8080;
- }
- location /API{
- proxy_pass http://ni.hao.sao/api;
- }
- }
保存后, 启动 Nginx.
PS: 并不需要太了解 Nginx 的配置, 很简单的.
步骤四:
访问: http://192.168.1.100:8888/
搞定.
PS: 注意访问的端口是'8888', 有其他域的地址继续加 location 就行了.
错误示范
我一开始不太懂 Nginx 的配置, 以为可以如下配置.
- server{
- listen 8080;
- server_name 192.168.1.100;
- location /API{
- proxy_pass http://ni.hao.sao/api;
- }
- }
之所以这么写, 是我认为这样可以让 Nginx 帮我监听 8080 的请求, 然后只转发匹配的请求. 我没有意识到的是 Nginx 这么写后, 是需要占用 8080 端口的.
既然需要占用端口, 那也就不能再被其他相同协议的进程占用, 就导致开发的页面无法以 8080 端口启用. 经同事提点, 才想起这事情, 换下思路, 就有了最上面的方法.
总结
其实不仅是在开发调试时候能这么干, 在生产环境也能这么玩. 利用 Nginx 转发请求之后, 就能够让所要部署的静态页面不需要放在跟请求接口同域的地方.
来源: https://www.cnblogs.com/lovesong/p/10269793.html