在没有可用资源的情况下，如何修复Angular中的CORS错误?

Question

我在这里写是因为我在这个问题上迷路了。我试过了所有可能的组合。我正在用Angular做课程项目。这是我第一次接触Angular。我已经了解了CORS是什么，为什么要使用它，以及关于它的一切。我已经创建了自己的Node.js服务器。我试过安装和不安装cors包。当安装时，我提供了所有这些不同的选项(当然不是在同一时间)::

module.exports = () => (req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
res.setHeader('Access-Control-Allow-Credentials', true);
res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.setHeader("Access-Control-Allow-Headers", 'Content-Type, X-Authorization');
next();
};

:上面导出的模块在导入时名为createdCors

app.use(createdCors())

同样的事情，但作为直接中间件在index.js

app.use((req,res,next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'HEAD,OPTIONS,GET,POST,PUT,DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, X-Authorization');


next()
})

这是index.js中的cors包:

app.use(cors({
origin: 'http://localhost:4200',
credentials: true
}))

另一个版本

app.use(cors({credentials: true, origin: 'http://localhost:4200', allowedHeaders: ['Content-Type, X-Authorization, X-RapidAPI-Key, X-RapidAPI-Host']}))

另一个

app.use(cors())

这是我的角拦截器:

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HTTP_INTERCEPTORS } from "@angular/common/http";
import { Injectable, Provider } from "@angular/core";
import { mergeMap, Observable, tap } from "rxjs";
@Injectable()
export class AppInterceptor implements HttpInterceptor{
accessToken:string | null = localStorage.getItem(`accessToken`)
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
{
if(this.accessToken)
{
return next.handle(req.clone({ setHeaders: {'X-Authorization' : this.accessToken}}))
}
else 
{
return next.handle(req.clone())
}
}
}
export const AppInterceptorProvider: Provider = {
provide:HTTP_INTERCEPTORS,
useClass: AppInterceptor,
multi:true
}

这是我的userService在后端:

function createAccessToken(user){
const payload = { 
_id: user._id,
email: user.email,
username: user.username
}
const accessToken = jwt.sign(payload,SECRET_KEY)
return{
email: user.email,
username: user.username,
accessToken,
_id:user._id
}
}
async function register(username,email, password){
const existingEmail = await User.findOne({email})
const existingUser = await User.findOne({username})
if(existingEmail){
throw new Error(`Email is already taken`)
}
else if(existingUser) {
throw new Error(`User already exists`)
}
const user = await User.create({username,email,password})
return createAccessToken(user)
} 

这是收银机。ts:

import { Component } from '@angular/core';
import {FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { passwordValidator } from 'src/app/shared/validator';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent {

errors: string | undefined = undefined;

constructor(private fb: FormBuilder, private userService: AuthService, private router: Router) {}

registerForm = this.fb.group({
email: [``,[Validators.required, Validators.email]],
username: [``, [Validators.required, Validators.minLength(6)]],
password: [``, [Validators.required, Validators.minLength(6)]],
rePass: [``, [Validators.required,passwordValidator]]
})

register(): void{
this.userService.register(this.registerForm.value).subscribe
({
next: () => this.router.navigate([`/`]),
error:(err)=>   {
this.errors = err.error.error
}
})

this.registerForm.reset()

}  

}

值正确地从表单中取出，所有这些CORS错误都不让我通过。

我很乐意接受任何建议。我不想为此安装chrome插件。我想把它做好

感谢

Answer 1

一种可能的情况是目标URL没有使用https，如果是这种情况，请以管理员身份打开浏览器:[1]: https://i.stack.imgur.com/HP7SV.png

但首先检查httpClient请求的所有参数，在这里你可以找到一个启发的例子

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
googleUrl = 'https://www.googleapis.com/books/v1/volumes';
constructor(private httpClient: HttpClient) {  }
getBooks(): Observable<object> {
let httpHeaders = new HttpHeaders()
.set('Accept', 'application/json')
let httpParams = new HttpParams()
.set('q', 'Gabriel García');
return this.httpClient.get<object>(this.googleUrl, {
headers: httpHeaders,
params: httpParams,
responseType: 'json'
});
}
}

Answer 2

解决方案之一是在项目的根目录中添加proxy.conf.json。你可以在这里找到一个很好的描述:

https://levelup.gitconnected.com/fixing-cors-errors-with-angular-cli-proxy-e5e0ef143f85