最近在学习前后端分离,前端使用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转发之后请求成功了: