如何允许获取 vue.js 到后端的 cors 策略？答案

【问题标题】：How to allow cors policy on fetch of vue.js to backend?如何允许获取 vue.js 到后端的 cors 策略？
【发布时间】：2020-10-17 02:33:59
【问题描述】：

我有一个前端代码正在向后端发出请求

（前端在 localhost:8081 上工作，请求将发送到 localhost:8080）

前端代码为：

<script lang="ts">import 'vue-material/dist/vue-material.css'
export default {
  tasks: [],
  data () {
    return {
    }
  },
  methods: {
       BLABLA
  },
  created () {
    fetch('http://localhost:8080/getTasks')
      .then(response => {
        return response.json()
      })
      .then(tasks => {
        this.tasks = tasks
      })
  }
}
</script>

后端控制器是：

import com.example.dto.TaskDto;
import com.example.model.Task;
import com.example.service.TaskService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Date;
import java.util.List;

@CrossOrigin(origins = "*", allowedHeaders = "*")
@RestController
public class TodoListController {

    @Autowired
    TaskService taskService;

    @GetMapping(value = "/getTasks", headers = ("Access-Control-Allow-Origin: *"))
    public List<Task> getTasks() {
        return taskService.getAllTasks();
    }

    @GetMapping("/getTaskById")
    public TaskDto getTaskById(Long id) {
        return taskService.getTaskById(id);
    }

    @PostMapping("/updateTask")
    public TaskDto updateTask(TaskDto taskDto) {
        taskService.updateTask(taskDto);
        return taskDto;
    }
}

只要请求完成，我就得到了

Access to fetch at 'http://localhost:8080/getTasks' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

错误。我加了

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

在后端休息控制器方法，但我仍然遇到同样的错误。我该如何解决这个问题？

【问题讨论】：

应该是@CrossOrigin(origins = "http://localhost:8081") ?
我已经编辑了对不起，已经是8081了
你最终的TodoListController是什么样的？
尝试在@RestController和@CrossOrigin之间添加@RequestMapping("/")并删除headers = ("Access-Control-Allow-Origin: *")
是的，问题已解决 :) 您可以写此评论作为问题的答案，我可以接受。非常感谢

标签： javascript spring vue.js http-headers cors

【解决方案1】：

尝试在@RestController 和@CrossOrigin 之间添加@RequestMapping("/") 并删除headers = ("Access-Control-Allow-Origin: *")。如果您不在类级别添加 RequestMapping 或在方法级别添加额外的标头，我相信这会让 Spring 感到困惑。

@CrossOrigin(origins = "*", allowedHeaders = "*")
@RequestMapping("/")
@RestController
public class TodoListController {
    @Autowired
    TaskService taskService;

    @GetMapping(value = "/getTasks")
    public List<Task> getTasks() {
        return taskService.getAllTasks();
    }
    ...
}

【讨论】：