跨域问题是指浏览器为了安全性，限制了不同源的网站之间的资源请求和数据交互。例如，如果你的前端网站是**https://example.com，而你的后端API是https://api.example.com**，那么当你的前端网站向后端API发送请求时，就会遇到跨域问题，因为它们的协议、域名或端口不一致。

为了解决跨域问题，一种常用的方法是使用CORS（Cross-Origin Resource Sharing）协议，它允许服务器在响应头中设置一些字段，来告诉浏览器哪些源可以访问哪些资源，以及可以使用哪些方法和头部。例如，服务器可以设置**Access-Control-Allow-Origin: *来表示任何源都可以访问该资源，或者设置Access-Control-Allow-Origin: <https://example.com>来表示只有https://example.com**这个源可以访问该资源。

我们将使用vercel和flask_cors来实现一个简单的后端API，并设置CORS协议来允许跨域访问。vercel是一个云平台，可以让你快速部署和托管你的网站和函数。flask_cors是一个flask扩展，可以方便地为你的flask应用添加CORS支持。

步骤一：创建一个flask应用

首先，我们需要创建一个简单的flask应用，它只有一个路由**/，返回Hello, world!**。我们可以使用pip安装flask和flask_cors，在vercel中只需要在requirements.txt文件中添加需要安装的库就可以了。然后，在api文件夹下创建一个index.py文件，写入以下代码：

# vercel解决跨域

# pip 安装flask_cors 在vercel中只需要在requirements添加需要安装的库就可以了
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources=r'/*')  # 这样可以实现全局的跨域访问

@app.route('/')
def index():
    return 'Hello, world!'

这里我们导入了flask和flask_cors，并创建了一个app对象。然后我们调用了CORS函数，并传入了app对象和resources参数。resources参数可以指定哪些路由需要启用CORS支持，这里我们使用了通配符*****来表示所有路由都需要启用CORS支持。如果你只想为某些路由启用CORS支持，你可以使用正则表达式或者字典来指定。例如：

# 只为/api路由启用CORS支持
CORS(app, resources=r'/api/*')

# 为/api和/hello路由启用CORS支持，并设置不同的选项
CORS(app, resources={
    r'/api/*': {'origins': '*'},
    r'/hello': {'origins': '<https://example.com>'}
})

步骤二：创建一个vercel.json文件

接下来，我们需要创建一个vercel.json文件，来配置我们的vercel项目。vercel.json文件是一个JSON格式的文件，它可以定义一些项目的属性和行为。在这个文件中，我们主要需要做两件事：

• 使用rewrites字段来重写所有的请求到/api/index路由，这样我们就可以使用vercel提供的函数功能来运行我们的flask应用。
• 使用headers字段来设置一些响应头，来覆盖或者补充flask_cors设置的CORS相关的头部。

vercel.json文件的内容如下：

{
  "version": 2,
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/api/index"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Access-Control-Allow-Origin",
          "value": "*"
        },
        {
          "key": "Access-Control-Allow-Methods",
          "value": "POST, GET, OPTIONS, PUT, DELETE"
        }
      ]
    }
  ]
}

这里我们使用了version字段来指定我们使用的vercel版本，目前最新的版本是2。然后我们使用了rewrites字段来定义一个重写规则，它的含义是将所有的请求（匹配**/(.*)的源）重写到/api/index路由（目标）。这样我们就可以使用vercel提供的函数功能来运行我们的flask应用，而不需要自己配置服务器。最后我们使用了headers字段来定义一些响应头，它们会应用到所有的请求（匹配/(.*)**的源）。这里我们设置了两个CORS相关的头部：

• Access-Control-Allow-Origin: * 表示允许任何源访问该资源。
• Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE 表示允许这些方法访问该资源。

这些头部可以覆盖或者补充flask_cors设置的头部，如果你想自定义更多的CORS选项，你可以参考这里。