尝试上传文件时出现“已被 CORS 策略阻止”

Posted 2023-03-03

【中文标题】尝试上传文件时出现“已被 CORS 策略阻止”

【英文标题】：Getting 'has been blocked by CORS policy' while trying to upload file

【发布时间】：2019-11-25 23:05:37

【问题描述】：

我试图设置一个 ui 用于使用 angular8 上传 excel 文件。前端和后端 (nodejs) 应用程序在两个不同的端口中运行。单击上传按钮时出现错误。

已尝试添加此代码：

app.use(cors());
app.use(function (req, res, next) 
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);

  next();
);

还是一样的错误

打字稿：

url_='http://localhost:3000/product/upload-exel'
    public uploader :FileUploader = new FileUploader(
      url:this.url_
    );

html:

<input type="file"  id="file"
ng2FileSelect [uploader]="uploader"
[(ngModel)]="path">

选项http://localhost:3000/product/upload-exel 404（未找到） 从源“http://localhost:4000”访问“http://localhost:3000/product/upload-exel”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：“Access-Control-Allow-Origin”标头中的值当请求的凭证模式为“包含”时，响应不能是通配符“*”。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

【问题讨论】：

错误显示The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.。那么您可以尝试删除* 并添加您的客户端主机名吗？由于您使用的是 angular ，请尝试使用 localhost:4200 而不是 *

你可以在前端使用代理吗？ ***.com/questions/47536466/…

我已将服务器地址更改为“Access-Control-Allow-Origin”，但仍然无法再次出现同样的错误。

我尝试使用代理仍然无法正常工作

【参考方案1】：

我的代码部署在 AWS 上，这对我有用：

除了在其他几个 Q/A 中说明的所有技术内容（待添加）外，请确保您的函数在 29 秒内将响应返回到前端。这是为您的响应设置的默认超时（和最大超时）。修复此问题后，我能够打破 CORS 错误。

【参考方案2】：

错误信息表明当请求的凭证模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头的值不能是通配符“*”。

如果您的后端服务器是 http://localhost:3000/ 并且您的客户端前端在 http://localhost:4000/ 上运行，那么您的后端标头应该是：

后端服务器

app.use(cors());
app.use(function (req, res, next) 
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4000/');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, 
OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);

  next();
);

【参考方案3】：

在您的后端，由于您使用的是 cors 模块，因此您可以这样做并且很安全

var cors = require('cors')
var app = express()

//set options for cors
//add your frontend addresson in the origin 
//for testing add localhost  and port
var corsOptions = 
  origin: 'http://localhost:3000',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204


//for specific endpoint enable cors
app.get('/products/:id', cors(corsOptions), function (req, res, next) 
  res.json(msg: 'This is CORS-enabled for only example.com.')
)

app.listen(80, function () 
  console.log('CORS-enabled web server listening on port 80')
)```

【参考方案4】：

在 Mac 上使用 nginx（自制软件）时也可能发生这种情况

如果您启用调试错误日志记录，您可以在上传时看到此错误 - 这实际上是导致 CORS 错误的原因：

25 open() "/usr/local/var/run/nginx/client_body_temp/0000000001" failed (13: Permission denied)

这可能是自制 nginx 中的一个错误：https://github.com/denji/homebrew-nginx/issues/124

不确定这是否是正确的修复方法，但我能够让它以这种方式工作：

sudo chown YOUR-MACOS-USER /usr/local/var/run/nginx/client_body_temp/

之后重启nginx