Question

我想将文件（图像）保存到我的发球弹簧中，但这是我遇到的问题

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

Answer 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);
}

指定跨域标记时，可以通过指定以下注释来自定义其：起源，方法，allowedHeaders，暴露的Headers，allowCredentials或maxAge

Answer 2

修复CORS错误

有两种方法可以这样做：-

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

Angular CLI代理

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

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

在Architect> serve>选项下使用proxyConfig键配置angular.json，该选项指向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就可以了。

CORS策略已阻止从来源“ http：// localhost：4200”访问“ http：// localhost：9090 / api / auth / produits / files”处的XMLHttpRequest

2 个答案: