CORS解决跨域问题

最新推荐文章于 2024-03-17 09:34:07 发布

scottfan

最新推荐文章于 2024-03-17 09:34:07 发布

阅读量967

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CORS 文章标签： asp.net spring

本文链接：https://blog.youkuaiyun.com/scottfan/article/details/106194427

CORS 专栏收录该内容

1 篇文章

订阅专栏

本文深入解析跨域概念，探讨浏览器同源策略下不同场景的跨域问题，并提供多种解决策略，包括JSONP、CORS及具体代码实现，适用于ASP.NET MVC、.NET Core与Java Spring框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是跨域，这里先借用一下别人的解释来解释一下。

什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：

http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

Access to XMLHttpRequest at 'http://xxx.xxx.xxx.xxx:8008/api/Login/GetLoginUserInfo' from origin 'http://localhost:8001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是调试asp.net mvc页面时的出错信息，把“http://xxx.xxx.xxx.xxx:8008/api/Login/GetLoginUserInfo”换成“/api/Login/GetLoginUserInfo”就可以，这种情况就是上面跨域例子中的一种情况，那么如何解决呢！

上网百度一下处理跨域的方法：

第一种：ajax中用JSONP的方法，不过该方法仅支持GET，也没有完全解决问题。

第二种：启用CROS

Cross Origin Resource Sharing（CORS）是一种W3C标准,允许服务器放松同源策略。CROS,服务器可以允许一些跨域源而拒绝其他域的请求。CORS比之前JSONP等技术更安全、更灵活。

关于启用CROS这种方式，网上提供做法也不少，看的眼花缭乱，经过各种尝试，终于找到一个用两行代码解决问题的方法。

首先在WebApiConfig中的Register方法中加入一行代码

config.EnableCors();

然后打开你准备启用CORS的Controller文件加入

using System.Web.Http.Cors;

然后在Controller上加注解[EnableCors(origins: "*", headers: "*", methods: "*")]

using System.Web.Http.Cors;
namespace RestfulService.Controllers
{
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class LoginController : ApiController
    {       
        [HttpPost]
        public HttpResponseMessage GetLoginUserInfo(JObject postData)
        {
            
        }
    }
}

重新编译发布之后，通过“http://xxx.xxx.xxx.xxx:8008/api/Login/GetLoginUserInfo”访问就可以成功了。网上其它解决方法感觉太繁琐，也没再做验证。

以上代码是在vs2015，asp.net mvc+webapi项目验证通过。

如果是.net core 项目，需要在Startup.cs中的ConfigureServices方法加以下代码

public void ConfigureServices(IServiceCollection services)
        {
            //配置跨域处理，允许所有来源：
            services.AddCors(o => o.AddPolicy("CORS1", builder =>
            {
                builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            }));
            
            services.Configure<CookiePolicyOptions>(options =>
            {
                // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                options.CheckConsentNeeded = context => true;
                options.MinimumSameSitePolicy = SameSiteMode.None;
            });


            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
            services.AddMvc().AddWebApiConventions();
            
        }

CORS1为自定义的名称

然后在Configure中加app.UseCors("CORS1")，注意，在放在app.UseMvc之前。

然后在Controller中引用

using Microsoft.AspNetCore.Cors;

在Controller前加[EnableCors("CORS1")]

这样就实现跨域访问了。

如果webapi方法使用java语言开发，使用Spring框架，启用CORS更简单，只需要为class加@CrossOrigin(origins = "*")注解即可。需要Spring 4.1以上版本，本文中为5.0版本

@CrossOrigin(origins = "*")
@RestController
public class Buy {}