本篇文章给大家谈谈React+ASP.NET.Core：所请求的资源上不存在“Access-Control-Allow-Origin”标头，以及所请求的资源不可用哪里错了的知识点，同时本文还将给你拓展

本篇文章给大家谈谈React + ASP.NET.Core：所请求的资源上不存在“ Access-Control-Allow-Origin”标头，以及所请求的资源不可用哪里错了的知识点，同时本文还将给你拓展AJAX请求获取“所请求的资源上不存在'Access-Control-Allow-Origin'标头”错误、ASP NET CORE – ANGULAR NO’Access-Control-Allow-Origin’标头出现在请求的资源上、asp.net – CORS错误 – 请求的资源上没有“Access-Control-Allow-Origin”标头、CORS问题-所请求的资源上没有“ Access-Control-Allow-Origin”标头等相关知识，希望对各位有所帮助，不要忘了收藏本站喔。

• React + ASP.NET.Core：所请求的资源上不存在“ Access-Control-Allow-Origin”标头（所请求的资源不可用哪里错了）
• AJAX请求获取“所请求的资源上不存在'Access-Control-Allow-Origin'标头”错误
• ASP NET CORE – ANGULAR NO’Access-Control-Allow-Origin’标头出现在请求的资源上
• asp.net – CORS错误 – 请求的资源上没有“Access-Control-Allow-Origin”标头
• CORS问题-所请求的资源上没有“ Access-Control-Allow-Origin”标头

React + ASP.NET.Core：所请求的资源上不存在“ Access-Control-Allow-Origin”标头（所请求的资源不可用哪里错了）

实际上，这不是 重复的
帖子，我知道在stackoverflow社区中多次问过的标题的一部分，我阅读了所有帖子和答案，但是我认为我使用的问题和技术是不同的。

首先，我应该提到的ASP.NET Core WEB/API是我的后端应用程序，Reactjs也是我的前端应用程序。

我读了一下CORS，发现必须CORS在ASP.NETApp ''Access-Control-Allow-Origin'':''*''上启用并放入
请求的标头，但是在调用api时仍然出现以下错误：

所请求的资源上没有“ Access-Control-Allow-Origin”标头。因此，不允许访问源’ http：//
localhost：8080
‘。该响应的HTTP状态代码为500。如果不透明响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。

这是我的Startup.cs代码与CORS：

public void ConfigureServices(IServiceCollection services){    // other lines of code    services.AddCors(options =>    {        options.AddPolicy("AllowAll",            builder =>            {                builder                .AllowAnyOrigin()                .AllowAnyMethod()                .AllowAnyHeader();            });    });    services.Configure<MvcOptions>(options =>    {        options.Filters.Add(new CorsAuthorizationFilterFactory("AllowAll"));    });    // other lines of code}public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory){    loggerFactory.AddConsole(Configuration.GetSection("Logging"));    loggerFactory.AddDebug();    app.UseCors("AllowAll");    app.UseAuthentication();    app.UseMvc();}

这是我的反应代码：

function save(message) {    const requestOptions = {        method: ''POST'',        mode: ''cors'',        headers: { ...authHeader(),             ''Content-Type'': ''application/json'',                ''Access-Control-Allow-Origin'':''*'',    },        body: JSON.stringify(message)                   };    return fetch(config.apiUrl + ''/message/save'', requestOptions).then(handleResponse, handleError);}

感谢您的回复。

答案1

经过两天的苦难，终于我找到了解决问题的方法。实际上，您的评论之一对我来说是一个很好的线索。

@ kirk-larkin说：

响应的HTTP状态代码500是此处的关键。当您的ASP.NET Core项目中存在异常时，将清除CORS标头。您应该尝试找出为什么引发异常。

我追踪了我的代码很多次，然后发现我忘记在Startup.cs中注册我的控制器中使用的服务。

我在Startup.cs中调用了以下代码，问题得以解决。

services.AddScoped<IMessageService, MessageService>();

AJAX请求获取“所请求的资源上不存在'Access-Control-Allow-Origin'标头”错误

我尝试GET在jQuery AJAX请求中发送请求。

$.ajax({    type: ''GET'',    url: /* <the link as string> */,    dataType: ''text/html'',    success: function() { alert("Success"); },    error: function() { alert("Error"); },});

但是，无论我尝试过什么， XMLHttpRequest cannot load <page>. No ''Access-Control-Allow-Origin'' header is present on the requested resource. Origin''http://localhost:7776'' is therefore not allowed access.

我尝试了所有操作，从使用AJAX而不是jQuery 添加header :{}定义到AJAX请求，甚至设置dataType为，甚至下载了一个启用CORS的插件-但没有任何帮助。JSONP``text/plain

如果我尝试访问任何其他站点，也会发生同样的情况。

有任何适当且简单解决方案的想法吗？有没有？

答案1

这是设计使然。您不能使用XMLHttpRequest向另一台服务器发出任意HTTP请求，除非该服务器通过为请求主机放置Access-Control-
Allow-Origin标头来允许它。

https://developer.mozilla.org/zh-
CN/docs/Web/HTTP/Access_control_CORS

您可以在script标记中检索它（对脚本，图像和样式表没有相同的限制），但是除非返回的内容是脚本，否则它不会给您带来什么好处。

这是有关CORS的教程：

http://www.bennadel.com/blog/2327-cross-origin-resource-sharing-cors-ajax-
requests-between-jquery-and-node-
js.htm

这样做都是为了保护最终用户。假设一个图像实际上是一个图像，一个样式表只是一个样式表，而一个脚本只是一个脚本，向另一台服务器请求这些资源并不会真正造成任何危害。

但总的来说，跨域请求可能会做的不好。假设您Zoltan正在使用coolsharks.com。还要说您已经登录到mybank.com，并且浏览器中有一个mybank.com的cookie。现在，假设coolsharks.com向mybank.com发送了AJAX请求，要求将您的所有资金转入另一个帐户。因为您存储了mybank.com
cookie，所以他们成功完成了请求。所有这些都是在您不知情的情况下发生的，因为没有页面重新加载发生。这是允许一般跨站点AJAX请求的危险。

如果要执行跨站点请求，则有两个选择：

1. 获取您向其请求的服务器之一
   。通过放入包含您（或*）的Access-Control-Allow-Origin标头来接纳您
   。b。为您提供JSONP API。

要么

1. 编写自己的不符合标准且没有限制的浏览器。

在（1）中，您必须与要向其请求的服务器合作，在（2）中，您必须对最终用户的浏览器具有控制权。如果您不能履行（1）或（2），那么您很不幸。

但是，还有第三种选择（由charlietfl指出）。您可以从您控制的服务器发出请求，然后将结果传递回页面。例如

<script>$.ajax({    type: ''GET'',    url: ''/proxyAjax.php?url=http%3A%2F%2Fstackoverflow.com%2F10m'',    dataType: ''text/html'',    success: function() { alert("Success"); },    error: function() { alert("Error"); }});</script>

然后在您的服务器上，最简单的方法是：

<?php// proxyAjax.php// ... validation of params// and checking of url against whitelist would happen here ...// assume that $url now contains "http://stackoverflow.com/10m"echo file_get_contents($url);

当然，此方法可能会遇到其他问题：

• 您代理的站点是否需要正确的引荐来源网址或特定的IP地址？
• cookie是否需要传递到目标服务器？
• 您的白名单是否足以保护您免受随意发出的请求？
• 当服务器接收到哪些标头（例如，修改时间等）时，您将它们传递回浏览器，而您将省略或更改哪些标头？
• 您的服务器是否被暗示提出了非法请求（因为您是代理人）？

我敢肯定还有其他人。但是，如果所有这些问题都不能阻止它，那么第三种方法可能会很好地工作。

ASP NET CORE – ANGULAR NO’Access-Control-Allow-Origin’标头出现在请求的资源上

postgetGetApplicationLookups(url: string) {
    var headers = new Headers();
    headers.set('Accept','application/json; charset=utf-8');
    headers.set('content-Type','application/json; charset=utf-8');
    let data = {};
    debugger;
    return this.http.post(
        url,data,{ headers: headers }
    )
        .map(this.handleSuccess)
        .catch(this.handleError)
}

public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options => options.AddPolicy("AllowAll",p => p.AllowAnyOrigin()           //Fix API ISSUE
                                                                    .AllowAnyMethod()               //Fix API ISSUE
                                                                     .AllowAnyHeader()));           //Fix API ISSUE


        services.AddMvc();
    }

    public void Configure(IApplicationBuilder app,IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true
            });
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }

        app.UseStaticFiles();

        app.UseCors("AllowAll");        

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",defaults: new { controller = "Home",action = "Index" });
        });
    }

services.AddCors(options =>
{
    options.AddPolicy("AllowAll",p =>
    {
        p.AllowAnyOrigin()
        .AllowAnyHeader()
        .AllowAnyMethod();
    });
});
...
services.AddMvc(); // must be after AddCors

app.UseCors("AllowAll");
app.UseMvc();

asp.net – CORS错误 – 请求的资源上没有“Access-Control-Allow-Origin”标头

CORS问题-所请求的资源上没有“ Access-Control-Allow-Origin”标头

@Override
protected void configure(HttpSecurity http) throws Exception {
   http
       .authorizeRequests()
           .andMatchers(HttpMethod.OPTIONS, "/**").permitAll()
           .antMatchers("/login").permitAll()
           .anyRequest().fullyAuthenticated()
           .and()
       .httpBasic()
           .and()
       .sessionManagement()
           .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
           .and()
       .csrf().disable();
}

@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

  @Override
  protected void configure(HttpSecurity http) throws Exception {
      http
          // by default uses a Bean by the name of corsConfigurationSource
          .cors().and()
          ...
  }

  @Bean
  CorsConfigurationSource corsConfigurationSource() {
      CorsConfiguration configuration = new CorsConfiguration();
      configuration.setAllowedOrigins(Arrays.asList("https://example.com"));
      configuration.setAllowedMethods(Arrays.asList("GET","POST"));
      UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
      source.registerCorsConfiguration("/**", configuration);
      return source;
  }
}

Response to preflight request doesn''t pass access control check: No ''Access-Control-Allow-Origin'' header is present on the requested resource. 
Origin ''http://localhost:8080'' is therefore not allowed access. The response had HTTP status code 401

var auth = "Basic " + btoa({usname} + ":" + {password});
var service_url = {serviceAppDomainName}/services;

if($("#registrationForm").valid()){
    var formData = JSON.stringify(getFormData(registrationForm));
    $.ajax({
        url: service_url+action,dataType: ''json'',async: false,type: ''POST'',headers:{
            "Authorization":auth
        },contentType: ''application/json'',data: formData,success: function(data){
            //success code
        },error: function( jqXhr,textStatus,errorThrown ){
            alert( errorThrown );
        });
}

@Configuration
@EnableWebMvc
public class CORSConfig extends WebMvcConfigurerAdapter  {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("*");
    }
}

@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
@EnableWebSecurity
@ComponentScan(basePackages = "com.services",scopedProxy = ScopedProxyMode.INTERFACES)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    @Qualifier("authenticationService")
    private UserDetailsService userDetailsService;

    @Bean
    @Override
    public AuthenticationManager authenticationManagerBean() throws Exception {
        return super.authenticationManagerBean();
    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService);
        auth.authenticationProvider(authenticationProvider());
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
       http
                .authorizeRequests()
                .antMatchers("/login").permitAll()
                .anyRequest().fullyAuthenticated();
        http.httpBasic();
        http.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
        http.csrf().disable();
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

    @Bean
    public DaoAuthenticationProvider authenticationProvider() {
        DaoAuthenticationProvider authenticationProvider = new DaoAuthenticationProvider();
        authenticationProvider.setUserDetailsService(userDetailsService);
        authenticationProvider.setPasswordEncoder(passwordEncoder());
        return authenticationProvider;
    }
}

 <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-config</artifactId>
            <version>3.2.3.RELEASE</version>
</dependency>
<dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-web</artifactId>
            <version>3.2.3.RELEASE</version>
</dependency>