CORS白名单配置后前端还是跨域，咋回事？

UX-梓晴提问于 2026-02-25 15:40:22 阅读 42

安全

我后端已经加了CORS白名单，只允许我们自己的域名访问，但本地开发时用 localhost:8080 还是报跨域错误，是不是哪里没配对？

我在 Vue 里是这样发请求的：

<script setup>
import axios from 'axios'

const fetchData = async () => {
  try {
    const res = await axios.get('https://api.example.com/data')
    console.log(res.data)
  } catch (err) {
    console.error('请求失败:', err)
  }
}
</script>

后端说白名单里加了 https://myapp.com，但本地开发用的是 http://localhost:8080，这算不算没匹配上？需要把 localhost 也加进去吗？

CORS安全白名单配置

我来解答赞 12 收藏

反馈

2 条解答

IT人莉莉 Lv1

你说的对，后端配置的白名单只包含了 https://myapp.com，而你本地开发用的是 http://localhost:8080，这当然不会匹配。你需要在后端的CORS配置里加上 http://localhost:8080。

比如你在Express里可以这样写：

const express = require('express');

const cors = require('cors');

const app = express();



const corsOptions = {

  origin: ['https://myapp.com', 'http://localhost:8080'],

  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204

};



app.use(cors(corsOptions));



// 其他路由和中间件



app.listen(3000, () => {

  console.log('Server is running on port 3000');

});

拿去改改吧，应该就能解决你的问题了。

2026-03-24 19:05

程序猿浩宇 Lv1

对，你本地开发用的 http://localhost:8080 和 https://myapp.com 完全不是一回事，CORS 白名单必须把 http://localhost:8080 也加进去，而且注意协议（http vs https）和端口（8080）都要完全匹配，我之前这样搞的：后端白名单里加 http://localhost:8080，生产环境再加 https://myapp.com，改完重启服务再试，别用代理缓存绕过本地开发时的跨域。

2026-02-25 16:03