跨域问题解决方案

1.为什么会出现跨域的问题

在Web开发中,跨域问题通常指的是浏览器出于安全考虑,限制了从一个源(domain, protocol, port)的网页去请求另一个源的资源。在前后端不分离的情况下,虽然前端可以通过JavaScript调用后端接口,但一旦后端接口是跨域的,浏览器就会阻止这个请求。这是因为浏览器遵循同源策略(Same-origin policy),它不允许来自一个源的网页脚本与另一个源的网页进行数据交互。

tips:前后端不分离的情况下,我们常用的方法就是前端js去调用后端接口,然后后端去调取跨域接口

2.常见的跨域方式

JsonP

JSONP(JSON with Padding)是一种利用<script>标签的跨域数据交互方式。因为<script>标签不受同源策略的限制,所以就可以通过动态创建<script>标签啦,在它的src属性中指定跨域URL来实现跨域数据请求。但JSONP只支持GET请求,并且存在安全风险。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>JSONP Example</title>  
</head>  
<body>  
  
<script>  
    function handleResponse(data) {  
        console.log(data); // 输出: { Name: "John Doe", Age: 30 }  
    }  
  // 创建一个新的script标签  
    var script = document.createElement('script');  
// 设置script标签的src属性为跨域URL,并附带一个回调函数名  
    script.src = 'https://your-backend-url/api/jsonp?callback=handleResponse';  
// 将script标签添加到DOM中,浏览器会发起跨域请求  
    document.body.appendChild(script);  
</script>  
  
</body>  
</html>

后端代码

[HttpGet("jsonp")]  
public IActionResult Jsonp(string callback)  
{  
    var data = new { Name = "John Doe", Age = 30 };  
    var jsonpCallback = HttpContext.Request.Query["callback"].ToString();  
    var jsonpResult = $"{jsonpCallback}({Newtonsoft.Json.JsonConvert.SerializeObject(data)})";  
    return Content(jsonpResult, "application/javascript");  
}

添加请求头实现跨域

通常指的是后端服务器在响应头中添加一些特定的字段(如Access-Control-Allow-Origin),来告诉浏览器这个响应允许哪些源的请求。但是,这种方式需要后端服务器的支持,并且只能由后端来配置。

public class CustomCorsMiddleware  
{  
    private readonly RequestDelegate _next;  

    public CustomCorsMiddleware(RequestDelegate next)  
    {  
        _next = next;  
    }  

    public async Task InvokeAsync(HttpContext context)  
    {  
        context.Response.Headers.Add("Access-Control-Allow-Origin", "http://example.com");  
        // 其他可能的跨域头...  

        await _next(context);  
    }  
}  

// 在 Startup.cs 的 Configure 方法中注册中间件  
app.UseMiddleware<CustomCorsMiddleware>();

高效CORS

CORS(Cross-Origin Resource Sharing)是W3C推荐的一种跨域资源共享方案,通过浏览器和服务器之间的通信来确定是否允许跨域请求。在.NET Core中,我们可以很方便地使用CORS中间件来实现跨域。

在.NET Core 8中使用CORS

在.NET Core 8(或任何支持CORS的.NET Core版本)中,你可以通过以下步骤来配置CORS:

1. 注入CORS服务

在Startup.cs的ConfigureServices方法中,你需要注入CORS服务并定义跨域策略。

public void ConfigureServices(IServiceCollection services)  
{  
    // ... 其他服务注入 ...  
  
    // 跨域配置  
    //方法1
    services.AddCors(options =>  
    {  
        options.AddPolicy("LimitRequests", policy =>  
        {  
            policy  
                .WithOrigins("http://example1.com", "http://example2.com") // 允许的源  
                .AllowAnyHeader() // 允许任何头  
                .AllowAnyMethod(); // 允许任何方法  
        });  
    });  
    
    
  
    // ... 其他代码 ...  
}

2. 在管道中启用CORS中间件

在Startup.cs的Configure方法中,你需要确保在调用其他中间件(如app.UseMvc()或app.UseRouting())之前启用CORS中间件。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)  
{  
    // ... 其他中间件配置 ...  
  
    // 启用CORS中间件  
    app.UseCors("LimitRequests"); // 使用前面定义的策略名称  
  
    // ... 路由和MVC中间件 ...  
    app.UseRouting();  
    app.UseEndpoints(endpoints =>  
    {  
        endpoints.MapControllers(); // 或其他路由配置  
    });  
  
    // ... 其他代码 ...  
}

注意事项

  • 我们一般建议不在生产环境中去用AllowAnyOrigin、AllowAnyHeader或AllowAnyMethod,这会增加应用面临安全风险的概率。要明确指定允许的源、头和方法。
  • 如果你的应用使用了其他中间件(如MVC、路由、重定向等),确保CORS中间件在它们之前被调用,否则跨域请求可能会失败。
  • 如果你在使用认证/授权中间件(如JWT),并且允许跨域携带凭据(通过设置AllowCredentials()),确保你的CORS策略中指定的源和你的身份验证服务器配置相匹配。
相关推荐
小曲曲21 分钟前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS2 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
Theodore_10222 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
冰帝海岸3 小时前
01-spring security认证笔记
java·笔记·spring
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
世间万物皆对象4 小时前
Spring Boot核心概念:日志管理
java·spring boot·单元测试
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app