【保姆级教学】部署Vue项目至服务器时跨域问题的解决方案

最近在尝试将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（监听端口那一层）进行设置，设置的位置不同，作用的范围不同！
手打不易，点个关注！！！！