如何解决如何解决 Angular 12 中的 CORS 问题？
我正在处理一个 Angular 项目，我有登录页面，在提交登录 API 期间，我遇到了 CORS 错误。我也附上了它的截图。任何建议将不胜感激。
API Service.ts:
constructor( private http: HttpClient ) { }
httpOptionsPost = {
headers: new HttpHeaders({
'Content-Type': 'application/json','Access-Control-Allow-Origin': '*','Access-Control-Allow-Credentials': 'true','Access-Control-Allow-Methods' : 'GET,POST,OPTIONS','Access-Control-Allow-Headers' : 'Origin,Content-Type,Accept,X-Custom-Header,Upgrade-Insecure-Requests',})
};
httpOptionsGet = {
headers: new HttpHeaders({
'Content-Type': 'application/json',})
};
_login(username,password) {
const url = this.domain + '/api/login?username='+username+'&password='+password;
return this.http.post(url,{},this.httpOptionsPost);
}
Login Component:
this.apiService._login(data.username,data.password).subscribe((resp: any) => {
const resobj = JSON.parse(JSON.stringify(resp));
console.log(resobj);
})
解决方法
我对 Angular 不太熟悉。但是，我在使用 Vue.js 时遇到了相同的 CORS 问题，解决方案是更改添加这些行：
library(purrr)
l1 <- list(a='a',b='b')
# single brackets - 'missing value where TRUE/FALSE needed'
imap(l1,~{
y1 <- names(l1)[.y]
if(y1 == 'a') out1 <- TRUE
if(y1 == 'b') out1 <- FALSE
out
})
# double brackets - subscript out of bounds
imap(l1,~{
y1 <- names(l1)[[.y]]
if(y1 == 'a') out1 <- TRUE
if(y1 == 'b') out1 <- FALSE
out
})
# emulating what I think imap() does
map2(l1,seq_along(l1),~{
y1 <- names(l1)[.y]
if(y1 == 'a') out1 <- TRUE
if(y1 == 'b') out1 <- FALSE
out1
})
并在执行 .get 或 .post 时将 module.exports = {
devServer: {
proxy: 'https://yourdomain'
}
}
替换为 localhost，例如：https://yourdomain/login
我不确定这是否适合你，因为我在这方面也很新，但它确实对我有用。
,在浏览器从 Angular 客户端应用程序调用您的 API URL 之前，它会发送一个预检请求（一个 HTTP OPTIONS 调用）。只有当您的客户端应用程序和服务器端应用程序驻留在不同的子域或域中时，才会发生这种情况。服务器端应用程序负责控制是否应该提供跨源请求。我看到您正在请求标头中设置 CORS 标头。但它应该是从 API 服务器接收的。因此，将其从 angular 端移除，并在服务器端代码中进行适当更改。
,默认情况下，同源策略 (SOP) 禁止对不同资源的请求。一切都应该从同一个源加载。这是为了防止网站在用户不知情的情况下从不同的服务器加载数据。但是，在某些情况下需要这样做。为了涵盖这种情况并仍然提供高安全性测量，创建了 CORS。
使用 CORS，可以将请求发送到与原始服务器不同的服务器。
为此，必须相应地配置接收请求的网络服务器。在您的情况下，这意味着您必须在提供您正在调用的登录 API 的应用程序中调整 CORS 设置，并允许 localhost:4200 能够发送 CORS 请求。
您需要设置代理配置以在本地运行应用程序。
一个简短的例子是：
// create a file proxy.config.json
{
"/api": {
"target": "http://example.com/",// put your actual domain
"secure": false // true or false depending on your needs.
}
}
然后运行您的项目，将代理 conf 传递给 ng-serve 或在 package.json 中配置它。 例如：
ng serve --proxy-config proxy.conf.json
或
npm start -- --proxy-config proxy.conf.json
或者简单地在 angular.json 中配置它。
然后，在您的代码中，删除域的使用，或者如果域与您要部署应用程序的位置不同，则使用 environment.dev.ts 将域分配给 localhost。 我指的是这个块中的域变量。
_login(username,password) {
const url = this.domain + '/api/login?username='+username+'&password='+password;
return this.http.post(url,{},this.httpOptionsPost);
}
在 https://www.positronx.io/setting-up-angular-proxy-configuration-via-angular-json/ 和/或官方 webpack 站点中获取更多详细信息以了解高级代理配置
,Cors 预检应在服务器端代码中处理。在您的情况下，请尝试将以下注释添加到您的控制器类中。
@CrossOrigin("*")
@PostMapping("/user")
public User userController(){
}
希望您有一个用于处理 CORS 的配置类，如果没有，请尝试添加一个。示例代码供参考。
@Configuration
public class SpringSecurityConfiguration extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
List<String> allowedMethods=new ArrayList<>();
allowedMethods.add("GET");
allowedMethods.add("POST");
allowedMethods.add("PUT");
allowedMethods.add("DELETE");
CorsConfiguration cors=new CorsConfiguration();
cors.setAllowedMethods(allowedMethods);
http.cors().configurationSource(request -> cors.applyPermitDefaultValues());
http.csrf().disable().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
.authorizeRequests().requestMatchers(EndpointRequest.to("loggers")).hasRole("ADMIN").and().httpBasic();
}}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。