Nginx反向代理解决前后端联调跨域问题

原因分析

同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。比如：前端项目在本地运行后的地址为http://localhost:8080/，此时要访问后端接口http://192.168.123.43:8000/api/xxx/xxx，就会遇到跨域问题不能访问。

解决方法

1. 下载

   http://nginx.org/

2. 配置

   进入你的ngnix安装目录，打开./conf/nginx.conf文件，修改http中server配置项，比如：

   server {
       # 要监听的地址
       listen       9000;
       server_name  localhost;
       
       # 前端资源
       location / {
           proxy_pass        http://localhost:8080;
       }
       
       # 后端接口
       location /api/ {
           proxy_pass        http://192.168.123.43:8000;
           proxy_set_header  Host  $host;
       }
   }
   

3. 启动

   在ngnix安装目录下，执行相应命令。下面为几个常用的命令，如需了解更多可以访问相关的nginx文档。

   • 测试配置文件格式是否正确： nginx -t
   • 启动： nginx
   • 重启： nginx -s reload
   • 停止： nginx -s stop
   
   就按上文配置的例子来讲，启动nginx后我们可以在http://localhost:9000/地址下访问前端页面，同时也可以访问到接口http://localhost:9000/api/xxx/xxx，这样前后端联调跨域问题就解决了。