使用Express与CORS开发时GET请求被CORS策略拦截是什么原因？

问题根因 #

你服务端CORS配置的origin字段仅允许http://address.com发起跨域请求，但你当前实际发起请求的前端页面源是http://localhost:8000，二者不匹配，浏览器就会按照CORS规则拦截请求。

解决方案 #

根据你的使用场景选择对应配置即可：

场景1：本地开发临时调试 #

直接放开所有源的跨域限制，仅推荐开发阶段使用，不要上生产：
修改server.js里的cors配置：

// 把原来的corsOptions替换成这行
var corsOptions = { origin: '*', optionsSuccessStatus: 200}

场景2：生产环境指定允许多个源 #

把你需要用到的前端访问源都加到允许列表里，比如你用到的http://localhost:8000、IP访问的源、正式域名http://address.com都加进去：

const allowedOrigins = [
  'http://address.com',
  'http://localhost:8000',
  'http://address:3000' // 这里替换成你实际的设备IP访问地址
]
var corsOptions = {
  origin: function (origin, callback) {
    // 允许没有origin的请求（比如端内页、postman调试）
    if (allowedOrigins.includes(origin) || !origin) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  },
  optionsSuccessStatus: 200
}

补充说明 #

你之前用IP访问时功能正常，是因为此时前端页面的origin刚好和你CSP、跨域允许列表里的IP地址匹配，所以不会触发拦截。你观察到POST正常GET异常的情况，大概率是测试POST时的请求源刚好匹配了允许的域名，或者POST属于不需要预检的简单请求，你可以核对下POST请求的测试场景是否和GET一致。

内容的提问来源于stack exchange，提问作者Quill