開始寫部落格吧！Start writing!

解决跨域问题

參考 link : https://medium.com/swf-lab/%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC%E5%B8%B8%E8%A6%8B%E4%B9%8B-cors-%E9%8C%AF%E8%AA%A4%E5%8E%9F%E5%9B%A0%E8%88%87-express-%E8%A7%A3%E6%B1%BA%E8%BE%A6%E6%B3%95-bc5eeedea6dc

該如何解決 CORS 錯誤呢？

解決 CORS 問題有很多種方法，分別可以從前端與後端下手，但大多從前端解決的方法都無法真正解決這個問題，所以這篇文章會主要介紹後端的解決辦法，並使用 Express 後端架構舉例。

預設情況下，Express 不允許跨域存取。換句話說，如果未設置 CORS 相關設置，則無法存取。不過，官方提供了一個易用的中介軟體來實作 CORS，讓我們一起來看看如何使用吧！

前端解決

方法 1

安裝 axios 套件

npm install axios

設定 Axios 跨域

axios.defaults.withCredentials = true;

這樣 Axios 就能夠跨域存取了。

方法 2（vite 專用）

安裝 vite-plugin-cors 套件

npm install vite-plugin-cors

設定 vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": "http://localhost:8080",
    },
  },
});

---

後端解決

安裝 cors 套件

npm install cors
npm install @types/cors --save-dev

設定 Express 啟用 CORS

const express = require("express");
const app = express();
const cors = require("cors");

app.use(cors());

但這時候的 CORS 預設是全部開放，會有點危險，進一步設定可以像以下步驟：

設定 CORS 白名單

const corsOptions = {
  origin: [
    'https://www.example.com',
    'http://localhost:3001',
  ],
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
  allowedHeaders: ['Content-Type', 'Authorization'],
};

app.use(cors(corsOptions));

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以邮件至 kimfei2014@gmail.com