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

Question

我的基于 .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);
    }
  );

解决方案：

1. 首先，将 web config 中的所有 cors 设置设置为“*”。
2. 其次，从 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>

Answer 1

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

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