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

Posted 2023-03-03

【中文标题】从源“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

【发布时间】：2019-09-19 12:57:05

【问题描述】：

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

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 属性控制。 我不知道这段代码有什么问题。请帮帮我？

【问题讨论】：

允许的标题怎么样？

【参考方案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 即可。