Nginx代理后端API(处理前端跨域问题)
背景
现代前端开发往往采用前后端分离的方式并行开发,但是在部署的时候会发现前端会报跨域的错误。
原因
浏览器采用同源策略
来保护我们的隐私及安全,禁用了跨域请求的能力。
解决办法
- 后端开启跨域(有选这种的🐴 🤪)
- 使用nginx代理后端接口(常规方式)
实现方式
希望能通过nginx将浏览器的请求代理到后端的API接口实现跨域请求的目的,例如:当浏览器请求 /api/users
的时候,通过nginx将请求转发到 http://192.168.0.1:8080/users
已实现我们目的。
以下是nginx极简的配置:
{
server {
listen 3000;
server_name localhost;
location / {
root /var/www/mainApp; ###配置应用的文件夹
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
###代理后端API的配置
location /api/ {
proxy_pass http://192.168.0.1:8080/;
}
}
nginx配置完成后执行nginx -s reload
重载配置后即可顺利访问。
补充说明:前文中的请求/api/users
代表spa项目中后端API的全路径访问URL,一般项目中会有一个base_url
(当然也有可能是其它的名称)的全局API的基础路径,如果不使用代理base_url
应为:http://192.168.0.1:8080
,使用代理时base_url
应为:/api
,通俗的讲就是我们在spa项目中使用/api
替换了http://192.168.0.1:8080
的写法。
作者:想好了再来改名字
声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。