1

我正在使用 Springboot ReactJS 和 MongoDB 开发一个项目。我已经实现了整个代码，但它没有从数据库中导入数据。它显示以下错误。

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

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

  1. 添加@crossorigin
  2. 添加 chrome 扩展
  3. npm 安装 cors

但它仍然不起作用。

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

控制器

    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
    })
4

1 回答 1

1

您可以尝试通过添加 http 组件依赖项，然后在控制器类中提供跨源值，您必须提到跨源中的链接，您的 RESTfull api 将从该链接被调用

依赖

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

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

 @CrossOrigin(origins = "http://localhost:8081")
于 2021-11-12T15:02:02.930 回答