我已经读了两个小时这个反向代理的文档来添加CORS头文件,我无法使用.能否请您帮助一个简单的例子如何使用它.
我在javascript中尝试过这个例子
(function() {
var cors_api_host = 'cors-anywhere.herokuapp.com';
var cors_api_url = 'https://' + cors_api_host + '/';
var slice = [].slice;
var origin = window.location.protocol + '//' + window.location.host;
var open = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
var args = slice.call(arguments);
var targetOrigin = /^https?:\/\/([^\/]+)/i.exec(args[1]);
if (targetOrigin && targetOrigin[0].toLowerCase() !== origin &&
targetOrigin[1] !== cors_api_host) {
args[1] = cors_api_url + args[1];
}
return open.apply(this, args);
};
})();
Run Code Online (Sandbox Code Playgroud)
我真的不明白我是否需要node.js或究竟是什么
我想使用 NestJs api,但在每个 api 中都收到相同的错误消息fetch:
Access to fetch at 'http://localhost:3000/articles' from origin 'http://localhost:4200' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Run Code Online (Sandbox Code Playgroud)
我的前端是一个 Angular,我有一个简单的fetch:
fetch('http://localhost:3000/articles')
.then((res) => {
console.log(res);
});
Run Code Online (Sandbox Code Playgroud)
我在 NestJs 中尝试了这些选项 - 但它们似乎都不起作用:
尝试 A
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.enableCors({
origin: true,
methods: …Run Code Online (Sandbox Code Playgroud) 我正在使用 Angular 和 NestJS 构建一个应用程序,并使用 NGXS 进行状态管理。我完成了所有设置并为我的应用程序提供服务,并在控制台中收到此错误。
从源“ http://localhost:4200 ”访问“localhost:333/api/product-index”处的 XMLHttpRequest已被 CORS 策略阻止:跨源请求仅支持协议方案:http、data、chrome、chrome - 扩展名,https。
经过一番研究后,我发现这篇文章解释了如何在我们的 Angular 应用程序中处理 CORS,在检查了它告诉我们要修改的文件后,我发现这些设置已经存在。我对它告诉我们要更新的文件感到困惑server.js,在研究了文件中通常执行的操作后,server.js我得出的结论是,在 Angular 中它一定是该main.ts文件,但我不知道是否需要对文件进行main.ts修改在我的 Nest 应用程序或我的 Angular 应用程序中。nrwl nx我也在我的应用程序中使用monorepo。
这是proxy.conf.json我的角度应用程序中的文件
{
"/cre8or-maker-backend": {
"target": "http://localhost:3333",
"secure": false,
"logLevel": "debug"
}
}
Run Code Online (Sandbox Code Playgroud)
这是我文件中对象serve的对象。architectangular.json
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "cre8or-maker:build",
"proxyConfig": "apps/cre8or-maker/proxy.conf.json"
}
Run Code Online (Sandbox Code Playgroud)
正如我之前所说,这些设置已经存在于这些文件中,对我来说唯一新鲜的是关于修改文件的部分server.js,我假设是main.tsAngular 世界中的文件。这是我的main.ts文件的样子
nest main.ts
import { …Run Code Online (Sandbox Code Playgroud)