Nginx转发解决前后端分离项目跨域请求(超详细)

最近在学习前后端分离,前端使用vue,后端使用spring+boot,前端学习到了发送请求,就测试了一下发送天天基金的接口,发现报了个跨域请求的错,如下图

Nginx转发解决前后端分离项目跨域请求(超详细)

什么是跨域请求呢?

通过查找,找到了这个,可以参考一下并了解一下:

跨域 No 'Access-Control-Allow-Origin' header is present on the requested resource._小花生编程-CSDN博客

这篇博客讲解了三种解决方法,针对如果后端项目不是自己整的,建议使用方法三,通过nginx来进行转发,nginx的作用相当于是个传话筒,用来做分发转发的作用,比如有有请求发送方(也就是客户端)C比如/potato-cli-market/xxx,nigix G(假设监听端口为9090),请求响应方(也就是服务端)S比如/potato-web-market/xxx:

客户端请求localhost:9090/helloworld的时候,G将你请求的helloword转发到你的前端项目C(比如是xxx-cli-xxx的helloword项目),C像请求S,通过G转发;

1.nginx官网:nginx

下载地址:nginx: download

nginx常用命令:

开启:start nginx

关闭:nginx.exe -s quit

重启:nginx.exe -s reload  (修改配置文件后需要重启才生效)

2.配置文件:

2.1配置监听端口

我这里监听的是9000

Nginx转发解决前后端分离项目跨域请求(超详细)

2.2 配置转发地址:

这个proxy_pass一定要加,默认没有,不加的话访问不了(参考【nginx】nginx解决跨域详解 - 吉古力 - 博客园

location / {
    root   html;
    index  index.html index.htm;
	proxy_pass   http://localhost:8080/;
}
location = /potato-web-market/ {
	proxy_pass   http://fundgz.1234567.com.cn/js/001186.js?rt=1463558676006;
}

注意这里需要添加 proxy_pass 为本地运行的项目地址 http://localhost:8080!!!  当访问 http://localhost:9000 的时候,location会匹配 ' / ' 到文件夹根目录下的index.html文件,但这里添加  proxy_pass 后,访问 http://localhost:9000  的时候会代理到 http://localhost:8080,而且你的访问路径显示的还是 http://localhost:9000 ,内容是 http://localhost:8080的地址

这里location匹配的是 访问  http://localhost:9000/potato-web-market/.*   路径的时候,在proxy_pass填上需要用到的外域api地址  http://fundgz.1234567.com.cn/js/001186.js?rt=1463558676006 ,此时就相当于访问:

http://api.zhuishushenqi.com/ .*  ,但实际上显示在你眼前的还是原来路径: http://localhost:9000/potato-web-market/.*   ,只是你访问这个原路径的时候nginx自动帮你代理到你想要访问的api路径 。但这里有个很重要的细节需要注意: 匹配路径  /potato-web-market/  和代理路径  http://fundgz.1234567.com.cn/  后面的斜杠统统都不能少!!!任何一个少了都不行,不信试试,这是nginx的规则。

3.测试

我本地vue启动访问是:

Nginx转发解决前后端分离项目跨域请求(超详细)

启动nginx后,我访问localhost:9000 

就可以访问了:

Nginx转发解决前后端分离项目跨域请求(超详细)

 并且我的请求地址为:

url:'potato-web-market',
method :'get'

通过nginx转发之后请求成功了:

Nginx转发解决前后端分离项目跨域请求(超详细)

上一篇:使用 Docker 和 Traefik 搭建 GitLab (前篇)


下一篇:disabled的使用方法