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

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

什么是跨域请求呢？

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

跨域 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

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后，我访问localhost:9000 

就可以访问了：

 并且我的请求地址为：

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

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

标签：http,跨域,nginx,9000,potato,Nginx,market,转发,localhost
来源： https://blog.csdn.net/qq_39187538/article/details/122616696