前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ASP.NET Core微服务(三)——【跨域配置】

ASP.NET Core微服务(三)——【跨域配置】

作者头像
红目香薰
发布2022-11-28 16:03:38
9270
发布2022-11-28 16:03:38
举报
文章被收录于专栏:CSDNToQQCode

ASP.NET Core微服务(三)——【跨域配置】

对应练习demo(跨域)下载路径(1积分):【https://download.csdn.net/download/feng8403000/15136711

对应练习sql下载路径(0积分):【https://download.csdn1/.net/download/feng8403000/15134699

未跨域的错误提示:【No 'Access-Control-Allow-Origin' header is present on the requested resource. 】

解决的方法如下:

跨域的【Startup.cs】文件配置

1、声明跨域策略名称

代码语言:javascript
复制
//声明跨域策略名称
        readonly string MyCorsPolicy = "CorsPolicy";

添加位置:

2、引入跨域服务

代码语言:javascript
复制
//引入跨域服务
            services.AddCors(options => options.AddPolicy(MyCorsPolicy, builder =>
            {
                builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
                services.AddControllers();
            }));

添加位置:

3、允许跨域请求

代码语言:javascript
复制
   //允许跨域请求
            app.UseCors();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers().RequireCors(MyCorsPolicy) ;
            });

添加位置: 

4、跨域测试(采用JQuery的ajax直接测试):

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跨域测试</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" />
</head>

<body>
    <script>
        $(function() {
            $.ajax({
                url: "http://localhost:5000/api/Test/GetInfo",
                dataType: "json",
                type: "get",
                success: function(data) {
                    data.forEach(element => {
                        document.write(element.id);
                        document.write(element.createDate);
                        document.write(element.nickName);
                        document.write(element.introduce);
                        document.write("<br/>");
                    });
                }
            });
        });
    </script>
</body>

</html>

效果如下:

成功跨域。

5、总结:

a)、跨域的三个配置分别的位置不同,请确定编写位置,本文有图片提示。

b)、本文直接做的【get】测试,如需【post】测试,请将【ajax的type值改为post】

希望此文对大家有所帮助,后续会编写

ASP.NET Core微服务(四)——【静态vue使用axios解析接口】、

ASP.NET Core微服务(五)——【vue脚手架解析接口】、

ASP.NET Core微服务(六)——【redis操作】、

ASP.NETCore微服务(七)——【docker部署linux上线】

等文章。

此文标题为ASP.NET Core微服务(二)——ASP.NET Core微服务(三)——【跨域配置】

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-02-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ASP.NET Core微服务(三)——【跨域配置】
  • 对应练习demo(跨域)下载路径(1积分):【https://download.csdn.net/download/feng8403000/15136711】
  • 对应练习sql下载路径(0积分):【https://download.csdn1/.net/download/feng8403000/15134699】
  • 未跨域的错误提示:【No 'Access-Control-Allow-Origin' header is present on the requested resource. 】
  • 解决的方法如下:
  • 跨域的【Startup.cs】文件配置
    • 1、声明跨域策略名称
      • 2、引入跨域服务
        • 3、允许跨域请求
          • 4、跨域测试(采用JQuery的ajax直接测试):
            • 5、总结:
              • ASP.NET Core微服务(四)——【静态vue使用axios解析接口】、
                • ASP.NET Core微服务(五)——【vue脚手架解析接口】、
                  • ASP.NET Core微服务(六)——【redis操作】、
                    • ASP.NETCore微服务(七)——【docker部署linux上线】
                    相关产品与服务
                    容器服务
                    腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                    领券
                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档