ReactJS/Springboot-被CORS策略阻止：无“访问控制允许来源”

Question

我正在工作的一个项目与SpringbootReactJS和MongoDB。我已经实现了整个代码，但它没有从数据库导入数据。它显示了以下错误。

访问位于“”的XMLHttpRequesthttp://localhost:8080/api/auth/file“起源”http://localhost:8081'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头。

我通过StackOverflow找到了解决方案，并尝试了以下方法来解决这个问题，

1. 添加@crossorigin

但还是不行。

如果有人能帮我解决这个问题，我会很高兴。

控制器

    package com.spring.mongodb.controllers;

import com.spring.mongodb.models.LogFile;
import com.spring.mongodb.models.LogRecord;
import com.spring.mongodb.models.LogRecordCollection;
import com.spring.mongodb.payload.request.BackupRequest;
import com.spring.mongodb.payload.request.DeleteFileRequest;
import com.spring.mongodb.repository.LogFileRepository;
import com.spring.mongodb.repository.LogRecordRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import javax.validation.Valid;
import java.util.List;


@RestController
@CrossOrigin(origins = "http://localhost:8081")
@RequestMapping("/api/auth/file")
public class LogFileController {

    @Autowired
    LogFileRepository logFileRepository;
    @Autowired    private LogRecordRepository logRecordRepository;

    @GetMapping("")
    public ResponseEntity<?> getAllLogFiles() {
        try{
            List<LogFile> logFiles = logFileRepository.findAll();
            return ResponseEntity.ok().body(logFiles);
        }catch (Exception e){
            return ResponseEntity.status(HttpStatus.EXPECTATION_FAILED).body(e.getMessage());
        }
    }
    @DeleteMapping
    public void deleteFiles(@Valid @RequestBody DeleteFileRequest request) {
        List<String> recordIds = request.getRecordIds();
        for (String recordId : recordIds) {

            logFileRepository.deleteById(recordId);
            LogRecordCollection collection = new LogRecordCollection();
            collection.setCollectionName(recordId);
            logRecordRepository.deleteAll();
        }
    }
}

从前端发送请求

await axios
        .get("http://localhost:8080/api/auth/file")
        .then((res) => {
          console.log(res);
          this.setState({
            folders: res.data,
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    this.setState({
      loading: true
    })

Answer 1

您可以尝试添加超文本传输协议组件依赖关系，然后在控制器类中给出交叉原点值，您必须提到交叉原点中的一个链接，从那里您的RESTful api将被调用

依赖关系

  <dependency>   
    <groupId>org.apache.httpcomponents</groupId>
    <artifactId>httpclient</artifactId>
    <scope>test</scope>
  </dependency>`

如下所示，您可以在控制器中添加交叉原点值

 @CrossOrigin(origins = "http://localhost:8081")