从源“http://localhost:4200”访问“http://localhost:9090/api/auth/produits/files”的 XMLHttpRequest 已被 CORS 策略阻止答案

【问题标题】：Access to XMLHttpRequest at 'http://localhost:9090/api/auth/produits/files' from origin 'http://localhost:4200' has been blocked by CORS policy从源“http://localhost:4200”访问“http://localhost:9090/api/auth/produits/files”的 XMLHttpRequest 已被 CORS 策略阻止
【发布时间】：2023-03-27 12:02:01
【问题描述】：

我想将文件（图像）保存到我的服务弹簧，但我有这个问题

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {FileUploader} from 'ng2-file-upload'; @Component({
 selector: 'app-root',
 templateUrl
 ./app.component.html','
 styleUrls: ['./app.component.scss']  
 })
 export class 
 here AppComponent implements OnInit {
 @ViewChild('fileInput') fileInput: ElementRef; 
 uploader: FileUploader;
 isDropOver: boolean; ngOnInit(): void {
 const headers = 
 [{name: 'Accept', value: 'application/json'}];
 this.uploader = new FileUploader({url: 
 'http://localhost:9090/api/auth/produits/files', autoUpload: true, 
  headers: headers});
  this.uploader.onCompleteAll = () => alert('File uploaded');
  }
  fileOverAnother(e: any): 
  void {
  this.isDropOver = e;
  }
  fileClicked() {
  this.fileInput.nativeElement.click();
  }
  }  


@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/api/auth")
@PostMapping(value = "/produits/files")
@ResponseStatus(HttpStatus.OK)
public void handleFileUpload(@RequestParam("file") MultipartFile file) 
throws IOException {
    fileService.storeFile(file);
}

访问 XMLHttpRequest 在 'http://localhost:9090/api/auth/produits/files' 来自原点 'http://localhost:4200' 已被 CORS 策略阻止：响应预检请求未通过访问控制检查：响应中的“Access-Control-Allow-Origin”标头不能是当请求的凭据模式为“包含”时，通配符“*”。这 XMLHttpRequest 发起的请求的凭证模式是
由 withCredentials 属性控制。
我不知道这段代码有什么问题。请帮帮我？

【问题讨论】：

允许的标题怎么样？

标签： angular spring-boot

【解决方案1】：

似乎未定义允许的标头选项：

@CrossOrigin(origins = "http://localhost:4200", allowedHeaders={"Accept"})
@RestController
@RequestMapping("/api/auth")
@PostMapping(value = "/produits/files")
@ResponseStatus(HttpStatus.OK)
public void handleFileUpload(@RequestParam("file") MultipartFile file) 
throws IOException {
    fileService.storeFile(file);
}

指定crossorigin的时候，可以通过指定如下注解来自定义：origins,methods, allowedHeaders,exposedHeaders,allowCredentials或者maxAge

【讨论】：

谢谢你，但即使这样我也有同样的问题
我还添加了allowCredentials，非常感谢您
@S'iwarHadjAli，很高兴它有帮助。

【解决方案2】：

修复 CORS 错误

有两种方法可以做到这一点：-

如果您拥有后端服务器，最好配置后端服务器返回适当的 CORS HTTP 标头配置
Angular CLI 代理，这是本文的重点。

Angular CLI 代理

在这里，我假设您有一个 Angular 项目，其中包含一些发出 HTTP 请求的服务。在 src 文件夹的根目录下创建名为 proxy.conf.json 的代理配置文件

                "/api": {
                    "target": "http://localhost:3000",
                    "secure": false
                }
            }

使用架构师下的 proxyConfig 键配置 angular.json>serve>指向 src/proxy.conf.json 的选项，如下所示

           "architect": {
                "serve": {
                  "builder": "@angular-devkit/build-angular:dev-server",
                  "options": {
                    "browserTarget": "your-application-name:build",
                    "proxyConfig": "src/proxy.conf.json"
                  },

现在，只需运行 ng serve 即可。

【讨论】：