Koa + XMLHttpRequest：请求的资源上不存在“Access-Control-Allow-Origin”标头[关闭]

Posted 2023-03-04

【中文标题】Koa + XMLHttpRequest：请求的资源上不存在“Access-Control-Allow-Origin”标头[关闭]

【英文标题】：Koa + XMLHttpRequest: No 'Access-Control-Allow-Origin' header is present on the requested resource [closed]

【发布时间】：2019-10-24 19:54:30

【问题描述】：

我在 Heroku 上部署了简单的 koa 服务器，并使用 XMLHttpRequest 进行 ajax。在我的发布请求中，我收到错误消息：

Access to XMLHttpRequest at 'https://upload-file-endpoint.herokuapp.com//upload-file' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

server.js

const Koa = require('koa');
const Router = require('koa-router');
const cors = require('@koa/cors');
const serve = require('koa-static');
const path = require('path');
const koaBodyMultipart = require('koa-body')( multipart: true );

var corsOptions = 
  origin: '*'
;

const app = new Koa();
app.use(cors(corsOptions));
app.use(serve(path.join(process.env.PWD, '/dist')));

const router = new Router();

router
  .post('/upload-file', koaBodyMultipart, (ctx, next) => 
    const  file  = ctx.request.files;
    if (file) 
        ctx.response.body = ctx.request.body;
     else 
        ctx.throw(500,'Error Message');
    
  )
  .post('/upload-file-error', koaBodyMultipart, (ctx, next) => 
    ctx.throw(500,'Error Message');
  );

app.use(router.routes()).use(router.allowedMethods());

// don't listen to this port if the app is required from a test script
if (!module.parent) 
  var server = app.listen(process.env.PORT || 1337);
  var port = server.address().port;
  console.log('running at port:' + port)

ajax 发布请求

var file = fileUpl.getFile();
const xhr = new XMLHttpRequest();

xhr.open("POST", "https://upload-file-endpoint.herokuapp.com//upload-file", true);
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
var formData = new FormData();
formData.append("file", file);
xhr.send(formData);

我正在使用@koa/cors 库。我尝试使用和不使用corsOptions 来初始化cors。

package.json

"dependencies": 
    "@koa/cors": "^3.0.0",
    "koa": "^2.7.0",
    "koa-body": "^4.1.0",
    "koa-router": "^7.4.0",
    "koa-send": "^5.0.0",
    "koa-static": "^5.0.0"
  ,
  "devDependencies": 
    "nodemon": "^1.19.1"
  

【问题讨论】：

响应的 HTTP 状态码是什么？使用浏览器开发工具中的网络窗格进行检查。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？

（顺便说一句，您可能真的不想让您的应用程序代码发回 500 错误。5xx 错误基本上是供服务器系统在出现内部服务器故障时发回的，对吧？您可能希望发送一些适当的 4xx 错误。）

@sideshowbarker 这个端点意味着当服务器由于服务器故障而无法处理文件时发生。我不知道为什么，但它现在有效，我没有改变任何东西。我想是因为我添加了corsOptions，然后部署在Heroku上并试用了一下。也许我需要在部署后稍等片刻。

【参考方案1】：

当我现在尝试时，它可以工作。服务器部署在 Heroku 上。

我加了

var corsOptions = 
  origin: '*'
;

当它部署在 Heroku 上时，我可能没有等待。