二级系统开发学习记录（三）options请求和跨域问题

折腾了两天踩坑不少，记录一下以免忘却。
将前端和后端项目部署之后，发现虽然服务器本体可以正常处理http请求，但是局域网内其他的设备只能访问前端页面无法正常发送http请求。查看控制台发现前端发送了两个请求，一个是options预检请求，另一个是正常的get，options虽然被回应了，代码为200，但是后端没有收到get请求。
报错如下：

Access to XMLHttpRequest at 'http://***.***.***.***:8080/sockjs-node/info?t=1746494677945' from origin 'http://localhost:8080' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://***.***.***.***' that is not equal to the supplied origin.

（隐去了实际的ip地址）
首先怀疑是nginx代理配置有问题导致的，关闭nginx使用vscode直接启动，还是这个报错。百度查找发现是跨域问题，百度给出了几种方案：

1.在vue项目配置跨域

proxy: {
      '/api': {
        target: "http://127.0.0.1:8080",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/,'')
      }
    }

大概像是这样的配置，然后带/api的http请求就会被代理到target的的地址，尝试并且用log打开监控，但是没监测到vue项目发出跨域请求，很奇怪，这个方法失败。

2.使用cors跨域

CORS(
    app,
    resources={
        r"/api/.*": {  
            "origins": "http://***.***.***.***:8080",  
            "methods": ["GET", "POST", "OPTIONS"],    
            "allow_headers": ["token","enc","Content-Type"] 
        }
    },
    supports_credentials=False
)

配置了一个这个，允许所有的请求，但是还是不行，仍旧报错

@app.after_request
def add_cors_headers(response):
    if request.path.startswith('/HTTP'):
        # response.headers['Access-Control-Allow-Origin'] = '***.***.***.***:8080'
        response.headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'
        response.headers['Access-Control-Allow-Headers'] = 'token, enc,Content-Type'
    return response

配置了一段这个就可以了，回复了带这些东西的请求，后端就能正常收到options和get了。

不过很奇怪，vue前端已经配置了跨域的情况下后端应该不需要再增加额外的东西去允许options吧？这方面还需要深入学习