vercel如何解決Python Flask跨域問題

跨域問題是指浏覽器為了安全性，限制了不同源的網站之間的資源請求和資料互動。例如，如果你的前端網站是**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選項，你可以參考這裡。