.net core实现前后端彻底分离

问题的关键在跨域

1.我们在services里面 添加跨域内容如下:

public void ConfigureServices(IServiceCollection services)
        {
            //这个AddOcelot方法是Ocelot包给IServiceCollection扩展的方法
            services.AddOcelot(configuration).AddConsul();
            #region CORS
            services.AddCors(c =>
            {
                //↓↓↓↓↓↓↓注意正式环境不要使用这种全开放的处理↓↓↓↓↓↓↓↓↓↓
                c.AddPolicy("AllRequests", policy =>
                {
                    policy
                    .AllowAnyOrigin()//允许任何源
                    .AllowAnyMethod()//允许任何方式
                    .AllowAnyHeader()//允许任何头
                    .AllowCredentials();//允许cookie
                });
                //↑↑↑↑↑↑↑注意正式环境不要使用这种全开放的处理↑↑↑↑↑↑↑↑↑↑

                //一般采用这种方法
                c.AddPolicy("LimitRequests", policy =>
                {
                    policy
                    .WithOrigins("http://localhost:8020", "http://blog.core.xxx.com", "")//支持多个域名端口
                    .WithMethods("GET", "POST", "PUT", "DELETE")//请求方法添加到策略
                    .WithHeaders("authorization");//标头添加到策略
                });

            });
            #endregion
        }

2.在中间件中添加跨域内容

 // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            #region 跨域相关
            app.UseCors("AllRequests");
            #endregion
            //app.Run(async (context) =>
            //{
            //    await context.Response.WriteAsync("Hello World!");
            //});
            app.UseOcelot().Wait();
        }

注意如果项目没有用ocelot 直接是请求webapi  我们上述内容写在webapi的startup文件中

如果项目使用了ocelot 那么我们的上述内容只需要写在ocelot项目中

3.跨域请求 get没什么问题 但是post要注意:

post请求传递参数要有如下代码:

一个完整的例子:

<html>

    <head>
        <meta charset="utf-8" />
        <title>请求</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $.ajax({
                type: "post",
                url: "https://www.xxx.net/xxxService/Category/AddCategory",
                data: JSON.stringify({
                    "CategoryName": "类别",
                    "Code": 4
                }),
                contentType:"application/json",

                success: function(data) {
                    console.log(data);
                },
                error: function() {
                    console.log("请求错误")
                }
            });
        </script>
    </head>

    <body>

    </body>

</html>

done!

原文地址:https://www.cnblogs.com/wholeworld/p/9648072.html

时间: 2024-10-12 21:20:54

.net core实现前后端彻底分离的相关文章

.NET Core WebApi 前后端开发分离后的配置和部署

转自博客:https://www.cnblogs.com/Vam8023/p/10670741.html 背景:现在越来越多的企业都采用了在开发上前后端分离,前后端开发上的分离有很多种,那么今天,我来分享一下项目中得的前后端分离. B/S Saas 项目:(这个项目可以理解成个人中心,当然不止这么点功能) 前端:node.js + vue 后端:.NET Core WebApi 前端安装 node.js 跟创建vue项目这些不是这篇文章的重点,重点在于项目完成后的部署. .NET Core We

ASP.NET Core模块化前后端分离快速开发框架介绍之4、模块化实现思路

源码 GitHub:https://github.com/iamoldli/NetModular 演示地址 地址:http://129.211.40.240:6220 账户:admin 密码:admin 前端框架演示地址(临时) 地址:http://progqx5cu.bkt.clouddn.com/skins/index.html#/ 账户:admin 密码:admin 目录 1.开篇 2.快速创建一个业务模块 3.数据访问模块介绍 4.模块化实现思路 获取官方源码 为了方便查看源码,我们先获

从一张图开始,谈一谈.NET Core和前后端技术的演进之路

从一张图开始,谈一谈.NET Core和前后端技术的演进之路 邹溪源,李文强,来自长沙.NET技术社区 一张图 2019年3月10日,在长沙.NET 技术社区组织的技术沙龙<.NET Core和前后端分离那些事儿>上,我们曾经试图通过一系列抽丝剥茧的过程来引导大家在这条基于.NET Core的前后端分离有关的技术路线上持续发散,由于各种原因未能成功,因此,技术社区执行主席,李文强同学整理了一张图,并由溪源以专刊的形式来描述他所认为的技术演进之路.  这张图涉及到的知识点,涵盖了目前前后端技术近

vue发布中的前后端分离和前后端不分离

前后端分离 思路:前端和后台完全分离.前端提供静态的css和js,在运行时将css和js给后端,后端进行数据的请求(ajax) 前后端分离就是前端和后台在不同的服务器上.基本是前端一个nginx加css和js 后端nginx加index.html 当用户访问的时候,访问后端nginx的网址,执行后端的index.html,在运行到资源时,访问前端的nginx返回的css,js等 前后端不分离 思路:前端和后台不分离.前端是源代码build后的代码 后端进行数据的请求(ajax) 前后端不分离就是

前后端分离与前后端不分离

前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高. 这种应用模式比较适合纯网页应用,但是当后端对接App时,App可能并不需要后端返回一个HTML网页,而仅仅是数据本身,所以后端原本返回网页的接口不再适用于前端App应用,为了对接App后端还需再开发一套接口. 请求的数据交互如下图: 前后端分离 在前后端分离的应用模式中,后端仅返回前端所需的数据,不再渲染HTML页面,不再控制前端的效果.至于

前后端分离与前后端不分离的区别

前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高. 这种应用模式比较适合纯网页应用,但是当后端对接App时,App可能并不需要后端返回一个HTML网页,而仅仅是数据本身,所以后端原本返回网页的接口不再适用于前端App应用,为了对接App后端还需再开发一套接口. 请求的数据交互如下图: 前后端分离 在前后端分离的应用模式中,后端仅返回前端所需的数据,不再渲染HTML页面,不再控制前端的效果.至于

前后端不分离

今天找文件的时候突然发现了一枚总结文档,觉得有必要留存,以防下次找不着就一不小心发了这篇,哈哈哈 一直做后台管理系统,采用react前后端分离,以接口的形式相互交流,猝不及防得来了三个页面开发,然后: 项目概况:二月开始接手A项目,该项目由前端写静态页面,php开发嵌套数据的形式展现,为期一个月,给前端时间为两周,然后交付到数据嵌套的人员:三月中旬开始接手B项目,该项目有两个端,支付宝端C端以及后台管理平台,这两个项目统统由前端写静态页面,java来嵌套数据. 项目详情: 1.A项目:由于一直没

【转载】java前后端 动静分离,JavaWeb项目为什么我们要放弃jsp?

原文:http://blog.csdn.net/piantoutongyang/article/details/50878214 今天看到两篇文章,讲解 为什么web开发启用jsp,确实挺有道理,整理如下: 使用jsp的痛点: 1.jsp上动态资源和静态资源全部耦合在一起,服务器压力大,因为服务器会收到各种静态资源的http请求,动态代码的等等,除非你使用nginx. 万一你的java代码出现了bug,你的页面是显示不出来的,直接蹦到了5xx页面,用户体验极差. (现在javaWeb项目业界的标

什么是前后端分离与前后端不分离

我起初认为前后端分离是,在软件开发过程中前后端分工就叫做前后端分离,其实是前端所有用到的数据都是后端通过异步接口的方式提供的,前端只管页面的展示及效果. 前端和后端不分离的时候,前端的页面也是由后端控制渲染的,两者的耦合度非常高.在业务逻辑复杂的系统里,我们最怕维护前后端混杂在一起的代码,因为没有约束,M-V-C每一层都可能出现别的层的代码,日积月累,完全没有维护性可言.这个时候出现了前后端分离这种模式,虽然前后端分离没办法完全解决这种问题,但是可以大大缓解. 那该怎么做到前后端分离呢? 前端: