VUE3 解决跨域问题 Access-Control-Allow-Origin

本项目使用VUE开发前端界面，使用FLASK框架搭建后端服务器逻辑代码。

问题

通过前端页面请求网址时，F12控制台出现报错：

No ‘Access-Control-Allow-Origin‘ header

试错

首先，我遇到的不是后端服务器 nginx 的问题，如下设置不起作用，请先设置 nginx ：

    server {
        listen       6000;
        server_name  localhost;

        add_header 'Access-Control-Allow-Origin' '*';  # 允许所有源进行跨域访问，如果需要特定源，请替换为具体的域名
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';  # 允许的HTTP方法
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';  # 允许的自定义请求头
        add_header 'Access-Control-Max-Age' 1728000;  # 预检请求缓存有效期

        location / {

            proxy_pass http://127.0.0.1:6000;  # 将请求代理到不同的端口上
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_http_version 1.1;

            if ($request_method = 'OPTIONS') {
                return 204;  # 对于预检请求（OPTIONS）直接返回204，不再向后端转发
            }
        }
    }

第二，这不是VUE的问题，百度了很多VUE文件设置和npm install --save ****

办法

我们使用的是flask框架，问题出在 flask.
Flask跨域问题可以通过CORS来解决。CORS是一个HTTP头，允许服务器告诉客户端，哪些源站点可以访问服务器上的资源。在Flask中，可以使用flask-cors库来简化CORS的配置。需要安装这个库：

pip install flask-cors

然后，在你的Flask应用中配置CORS：

from flask import Flask
from flask_cors import CORS
 
app = Flask(__name__)
CORS(app)
 
@app.route('/')
def hello_world():
    return 'Hello, cross-origin-world!'

如果需要更细致的控制，比如只允许特定的源访问资源，可以这样配置：

from flask import Flask
from flask_cors import CORS
 
app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "http://example.com"}})
 
@app.route('/api/hello')
def hello_world():
    return 'Hello, cross-origin-world!'

在上面的这个例子中，只有来自http://example.com的请求才能访问/api/hello端点。