最近在尝试将yolov5+Vue框架python所编写的项目部署到服务器上时出现了问题,前端的网页可以访问页面,但是前端和后端无法进行沟通,即请求无法传输,在浏览器按F12,打开控制台,发现报错:
Access to XMLHttpRequest at ‘http://xxxx‘ from origin ‘http://xxxx‘ has been blocked by CORS policy
当时的问题截屏:
因为是内网,所以没有直接截取屏幕,经过查询是跨域问题!
简单来说:就是目前大部分项目都采取前端后端分离的方式进行编写,简单来说就是前端和后端的数据通过不同的端口来进行传输,但是因为浏览器一些安全协议的问题,导致不能互相访问!
解决方案:
一、在后端启动程序中增加代码:
# 添加header解决跨域
@app.after_request
def after_request(response):
response.headers['Access-Control-Allow-Origin'] = '*'
response.headers['Access-Control-Allow-Credentials'] = 'true'
response.headers['Access-Control-Allow-Methods'] = 'POST'
response.headers['Access-Control-Allow-Headers'] = 'Content-Type, X-Requested-With'
return response
把代码放在main函数上面的任意地方就可以,但是这个代码写上去只能保证127.0.0.1这个IP下可以解决跨越问题(有的情况192.168.xxx.xxx的IP也可以解决),但是一旦你自己设置电脑的IP,再访问仍然会出现跨域问题的报错!
二、使用nginx来解决该问题
nginx是用来解决跨域问题的工具,本身是个压缩包,把参数调好,双击.exe运行就可以,无需安装。
下面就具体叙述如何调整参数
1.将下好的压缩包解压,看到如下的目录
2.进入.\board-nginx\conf,找到nginx.conf,这是我们要调参数的地方!
3.用编译器或文本打开它,进行参数调整,具体调整什么见下面的代码块!!!
有#的地方你要调整,其他的地方不用管,如果你拿到的.conf和我的不一样,比我的多,你只需要找到我标注的地方按照说明进行更改!
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
server {
listen 8081; #你程序启动的主端口,可以任意设置(只要不被占用),因为Vue自启动8080,所以我这里设了8081
server_name 127.0.0.1;
charset utf-8;
root d:/workspase/building-board/www/root;
expires 1s;
#location /后的core-manage可以换别的名字,不重要,如果你有多个工程页面可以
#多建几个location,其中的alias,要写前端的index.html所在的目录的位置,其实写它的上级目录也没事,不过最好写详细!!!我只有一个index界面,所以只用一个location!
location /core-manage {
add_header Cache-Control no-cache;
add_header Pragma no-cache;
add_header Expires 0;
autoindex on;
alias "d:/";
index index.html index.htm;
if ( $request_uri ~* ^(/.*/skin)){
rewrite ^/.*/skin/(.*)$ /skin/$1 last;
}
}
#此处进行访问端口的参数设置,你的前端与后端用了几个端口跑,你就创建多少个类似的location /server/ (server可以换名字),在proxy_pass http:写端口,IP保持127.0.0.1,这样可以自适应你电脑的IP设置,我只需要8080和5003,所以我设置了两个server,至此设置完毕,保存。
location /server/ {
proxy_pass http://127.0.0.1:5003/;
proxy_redirect default;
proxy_set_header Host $host:$server_port;
}
location /server2/ {
proxy_pass http://127.0.0.1:8080/;
proxy_redirect default;
proxy_set_header Host $host:$server_port;
}
}
}
4.退出到外面,运行ngnix.exe即可
PS:1.ngnix.exe点击一次就可以,不要多点,每次开机都要重新运行服务!
2.记得把程序中的IP地址替换为你在config中写的名字,比如我需要将程序中的127.0.0.1:5003换为server,127.0.0.1:8080换为server2
3.很重要的一点,ngnix是默认有传输数据的大小限制的,其大小为1M,如果需要更大的传输量,需要进行设置。
其格式为:
location / {
...
client_max_body_size 100m;
}
也可在server(监听端口那一层)进行设置,设置的位置不同,作用的范围不同!
手打不易,点个关注!!!!