React Cors 政策问题没有“访问控制允许来源”

Posted 2023-02-22

【中文标题】React Cors 政策问题没有“访问控制允许来源”

【英文标题】：React Cors Policy Problem No 'Access-Control-Allow-Origin'

【发布时间】：2020-11-02 01:46:24

【问题描述】：

我的基于 .net 核心的 web api 应用程序托管在 api.mydomain.com 下的同一台服务器上。另一方面，我在 mydomain.com 下有 reactjs。

当我从我的 react 应用程序（mydomain.com）发出任何请求时，web api 会返回该错误 -->

在“https://api.mydomain.com/api/auth/login”访问 XMLHttpRequest 来自原点“mydomain.com”的 CORS 策略已阻止： 请求中不存在“Access-Control-Allow-Origin”标头 资源。

我尝试了所有方法，但我无法解决。

注意：应用程序在 IIS 服务器上运行。

.net core 3.1.5 webapi cors配置

    services.AddCors(options =>
    
        options.AddPolicy("AllowOrigin",
            builder => builder.WithOrigins("mydomain.com").AllowAnyMethod().AllowAnyHeader().AllowCredentials());
    );
...............

app.UseCors("AllowOrigin");

然后这是我的 axios 拦截器配置

  let isRefreshing: boolean = false;
  let failedQueue: any = [];

  const processQueue = (error: any, token: any = null) => 
    failedQueue.forEach((prom: any) => 
      if (error) 
        prom.reject(error);
       else 
        prom.resolve(token);
      
    );

    failedQueue = [];
  ;

  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();
  axios.defaults.baseURL = getBaseUrl; // mydomain.com
  axios.defaults.headers.common["Authorization"] =
    "Bearer " + getStoredUserAuth().token;

  axios.defaults.headers.post["Content-Type"] =
    "application/x-www-form-urlencoded";
  axios.defaults.cancelToken = source.token;

  axios.interceptors.response.use(
    async response => 
      return response;
    ,
    async error => 
      const originalRequest = error.config;
      if (error.response) 
        const status = error.response.status;
        const refreshToken = getStoredUserAuth().refreshToken;
        if (status === 401 && !originalRequest._retry) 
          if (isRefreshing) 
            return new Promise(function(resolve, reject) 
              failedQueue.push( resolve, reject );
            )
              .then(token => 
                originalRequest.headers["Authorization"] = "Bearer " + token;
                return axios(originalRequest);
              )
              .catch(err => 
                return Promise.reject(err);
              );
          

          originalRequest._retry = true;
          isRefreshing = true;

          return new Promise(function(resolve, reject) 
            refreshAccessToken(refreshToken)
              .then(response => 
                if (response.status === 200) 
                  if (response.data.token) 
                    setAuthStatus(response.data);
                    axios.defaults.headers.common["Authorization"] =
                      "Bearer " + response.data.token;
                    originalRequest.headers["Authorization"] =
                      "Bearer " + response.data.token;
                  
                  processQueue(null, response.data.token);
                  resolve(axios(originalRequest));
                 else 
                  throw new Error();
                
              )
              .catch(err => 
                failedQueue = [];
                setUnauthStatus();
                source.cancel("Session time out.");
                processQueue(err, null);
                reject(err);
              )
              .then(() => 
                isRefreshing = false;
              );
          );


        


       else 
        debugger;
        errorHandler(error);
      
      return Promise.reject(error);
    
  );

解决方案：

首先，将 web config 中的所有 cors 设置设置为“*”。 其次，从 plesk 面板关闭 modsecurity。

解决方案的 web.config

<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
      </handlers>
      <aspNetCore processPath="dotnet" arguments=".\WebAPI.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />
    </system.webServer>
  </location>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="https://yourdomain.com" />
                <add name="Access-Control-Allow-Headers" value="Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization, Content-Disposition" />
                <add name="Access-Control-Allow-Methods" value="*" />
                <add name="Access-Control-Allow-Credentials" value="true" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

【问题讨论】：

我什么都做不了，我需要帮助。

Applications run on IIS server 如果可能，您可以尝试安装IIS CORS module 并为您的站点/应用程序配置，并检查它是否适合您。

@CodAvo 你能详细说明一下解决方案吗？我也有同样的问题。

@sdagkas 当然，现在你可以看到解决方案的详细信息

【参考方案1】：

我认为您的问题是您在服务器上的 CORS 配置。我将其更改为：

builder => builder.WithOrigins("https://*.mydomain.com").AllowAnyMethod().AllowAnyHeader().AllowCredentials());

【讨论】：

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。现在，我收到了这个错误

你也可以试试WithOrigins("*")看看会发生什么。