.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！