如何解决我在使用 Vue JS 应用程序时遇到的以下 CORS 错误 [关闭]

Posted 2023-03-04

【中文标题】如何解决我在使用 Vue JS 应用程序时遇到的以下 CORS 错误 [关闭]

【英文标题】：How to resolve the below CORS error I am getting with Vue JS app [closed]

【发布时间】：2020-11-21 19:21:54

【问题描述】：

我在 Spring Boot 中有一个前端和 Vue 和后端，在 Spring Boot 应用程序中我有一个带有 2 个端点的控制器 - /api/v1/user/login (POST) 和 /api/v1/user/得到（得到）。我在控制器上添加了@CrossOrigin 注释。这个想法是向登录端点发出请求，从响应中检索 jwt 令牌，然后通过在“授权”标头中传递令牌来调用 get 端点。当我调用登录端点时，它工作正常并且我得到了令牌，但是当我调用 get 端点时，我在 chrome 中得到一个 CORS 错误，如下所示。我不知道为什么一个端点工作，但另一个抛出 CORS 错误。

CORS 策略已阻止从源“http://localhost:8082/api/v1/user/get”访问 XMLHttpRequest 源“http://localhost:8081”：对预检请求的响应不'不通过访问控制检查：它没有 HTTP ok 状态。

当我检查“网络”选项卡时，我还观察到一个奇怪的行为，两个请求将发送到 get 端点，一个带有“授权”标头，另一个没有它。我也不知道为什么会这样。

【问题讨论】：

为什么我无法回答这个问题。回答选项已禁用。

***.com/questions/42016126/…

【参考方案1】：

您必须在后端应用程序中配置 cors。 使用此配置，您应该能够连接到您的后端。但是您必须在应用程序中正确配置 CORS。 哪里有'*'，你必须指向你的前端服务的地址。

假设您的 vuejs 应用程序在 http://localhost:3000 中运行 您必须将您的 cors 配置为指向该地址：

 res.addHeader("Access-Control-Allow-Origin", "http://localhost:3000");

在开发中，您应该指向您的前端正在服务的地址。

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class OriginsFilterConfiguration implements Filter 
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException 
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type");
        chain.doFilter(request, response);
    

了解更多关于 cors follow link.

【讨论】：

这是更好的解决方案：***.com/questions/42016126/…