春季啟動中的 CORS 不起作用 - 得到空響應

Question

我的后端應用程序使用 Spring Boot (Tomcat + Java)，前端使用 React。 我試圖從“ http://localhost:8080/vr-backend-0.0.1-SNAPSHOT/stockdata/NIFTY19DECFUT?from=2019-12-03&to=2019-12-03 ”訪問“ http://localhost: 3000 ”。

我在控制器級別和端點級別都添加了 @CrossOrigin(origins = "*") 。 我得到空結果。 我在控制器級別和端點級別都添加了@CrossOrigin。 我得到空結果。

如果我刪除 @CrossOrigin 注釋，則會收到 Cors 錯誤。 這意味着注釋是必要的。 錯誤是“訪問在 ' http://localhost:8080/vr-backend-0.0.1-SNAPSHOT/stockdata/NIFTY19DECFUT?from=2019-12-03&to=2019-12-03 ' from origin ' http: //localhost:3000 ' has been Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the request resource. 如果不透明響應滿足您的需求，請將請求的模式設置為 'no-cors' 以在禁用 CORS 的情況下獲取資源。”

如果我直接將鏈接復制粘貼到瀏覽器中，則它可以正常工作並返回 JSON。 如果我調用“ https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv ”，它也會返回結果。

為了避免打字錯誤，我做了 console.log 並且我從 console.log 粘貼這些。

我正在使用 fetch 來獲取 'get'ting。

[編輯 1] 我正在查看 tomcat 日志並將很快對其進行更新。

[編輯 2] TL;DR 這不是 CORS 問題。

完整說明： 1. “ http://localhost:8080/vr-backend-0.0.1-SNAPSHOT/stockdata/NIFTY19DECFUT?from=2019-12-03&to=2019-12-03 ”的響應為 200。

2. 我登錄了 spring boot 應用程序並查看了 tomcat 日志。 它到達控制器方法，我從 DB 得到正確的結果。 當我發回響應時，我在瀏覽器中得到空結果。 如前所述，如果我直接點擊 url，我會得到正確的結果。

3. 這不是預檢選項請求。

4. 所以可以斷定不是CORS問題。 @CrossOrigin 注釋有效

發布問題后，我查看了日志。 所以這個問題可以關閉，因為它是不正確的。 如果我無法解決空響應問題，我將發布一個單獨的問題，因為此問題標題具有誤導性。

謝謝大家的回應。

Answer 1

我以這種方式使用它來允許來自所有來源的請求。 它對我的所有項目都有效。

package com.example.demo.filters;

import java.io.IOException;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.http.HttpHeaders;
import org.springframework.stereotype.Component;
import org.springframework.web.filter.OncePerRequestFilter;

@Component
public class CORSFilter extends OncePerRequestFilter {

    @Override
    public void doFilterInternal(final HttpServletRequest request, final HttpServletResponse response,
            final FilterChain filterChain) throws ServletException, IOException {

        response.setHeader(HttpHeaders.ACCESS_CONTROL_ALLOW_HEADERS,
                "Origin, Content-Type, Accept, Authorization, Accept-Language, connection, Cache-Control, Access-Control-Request-Method, Access-Control-Request-Headers");
        response.setHeader(HttpHeaders.ACCESS_CONTROL_ALLOW_CREDENTIALS, "true");
        response.setHeader(HttpHeaders.ACCESS_CONTROL_ALLOW_METHODS, "GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD");
        response.setHeader(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS,
                "Access-Control-Allow-Origin, Access-Control-Allow-Credentials");
        response.setHeader(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN, request.getHeader(HttpHeaders.ORIGIN));
        filterChain.doFilter(request, response);

    }
}

Answer 2

我只在應用程序級別配置過 CORS，但是 @CrossOrigin 注釋的文檔說它默認允許所有來源，所以你可能想嘗試@CrossOrigin()而不是@CrossOrigin(origins = "*")

該文檔還說它支持“@RequestMapping 注釋中指定的 HTTP 方法”，因此除了 GET 或 POST 或您當前使用的任何方法之外，您可能還需要添加 OPTIONS 方法（CORS 需要支持 OPTIONS 方法） ）。

Answer 3

您可以在 api 端點中使用 @CrossOrigin 而不要提及來源。

指定來源也可能對多層環境造成影響。

Answer 4

請記住Access-Control-Allow-Origin: *僅在您沒有任何身份驗證方法（沒有憑據的請求）時使用。 看：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

如果不透明響應滿足您的需求，請將請求的模式設置為“no-cors”以在禁用 CORS 的情況下獲取資源

不要在fetch調用中使用'no-cors' ，因為你會得到不透明的響應。 指定'cors'或不指定任何內容。

const response = await fetch("http://localhost:8080", {
   method: 'GET',
   // mode: 'cors',
   headers: {
      'Accept': 'application/json'
   }
});

實際上，當您得到200 OK但opaque響應時，它不再是來自服務器的問題。 響應是 200，但數據是不透明的，因為前端可能設置了“no-cors”或類似設置。 看：

https://developers.google.com/web/updates/2015/03/introduction-to-fetch

關於后端，在 Spring Boot (w/Kotlin) 中，我使用它發送Access-Control-Allow-Origin: *標頭，基於spring-boot-starter-security庫。

package demo.config

import org.springframework.context.annotation.Configuration
import org.springframework.security.config.annotation.web.builders.HttpSecurity
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter

@Configuration
class GeneralApiSecurityConfig() : WebSecurityConfigurerAdapter() {
    override fun configure(http: HttpSecurity) {
        http.cors()
    }
}

只是http.cors()

哦，這可能是一條微不足道的建議，但是如果您弄亂了配置，請每次都重新啟動服務器，否則，您很可能正在刷新前端客戶端，但服務器會卡在以前的嘗試中。