Access-Control-Allow-Origin多值错误：跨域访问被拒绝问题求助

Hey there, let's work through this CORS issue you're hitting. First, let's break down why that error is popping up:

‘Access-Control-Allow-Origin’响应头包含多个值‘http://localhost:8080, http://localhost:8080, http://localhost:8080’。报错信息2：‘Access-Control-Allow-Origin’响应头包含多个值‘ http://localhost:8080 , http://localhost:8080 , http://localhost:8080 ’，仅允许设置一个值，因此源‘ http://localhost:8080 ’的访问被拒绝。

Browsers have strict rules for the Access-Control-Allow-Origin header: it can only have one single value (either a specific origin like http://localhost:8080, or the wildcard * — though * won't work if you're using withCredentials: true). Your server is sending this header three times with the same value, which triggers the browser's security block.

Step 1: Fix the Server-Side CORS Configuration #

This is the root of the problem. You need to audit your server's CORS setup to ensure Access-Control-Allow-Origin is added only once. Here are common scenarios to check:

• If using a framework like Spring Boot: Look for duplicate allowedOrigins("http://localhost:8080") entries in your CORS config bean, or check if multiple filters are injecting this header.
• If using Nginx/Apache: Verify your server config doesn't repeat the add_header Access-Control-Allow-Origin http://localhost:8080; directive (e.g., across multiple location blocks).
• Since your request uses withCredentials: true, make sure the server also returns Access-Control-Allow-Credentials: true in the response headers — this is required for credentialed cross-origin requests.

Step 2: Clean Up Your Frontend jQuery Code #

Your current code works, but there are redundant settings we can streamline:

$.ajax({
    url: "http://tilesdev1.intra.schneider.com/api/fa-snihelp-service/entserv",
    type: "GET",
    dataType: 'json',
    xhrFields: {
        withCredentials: true
    },
    success: function (result) {
        debugger;
    },
    error: function (xhr, textStatus, error) {
        console.error(error);
    },
});

• Removed crossDomain: true: jQuery automatically enables this for cross-origin requests, so it's unnecessary to set explicitly.
• Removed the Content-Type header: GET requests default to application/x-www-form-urlencoded, so this line was redundant.

Quick Check After Fixes #

Once you adjust the server config, use your browser's DevTools (Network tab) to inspect the response headers. Confirm:

1. Access-Control-Allow-Origin appears exactly once with the value http://localhost:8080
2. Access-Control-Allow-Credentials: true is present

内容的提问来源于stack exchange，提问作者Raviraj reddy