您的位置：首页 > 编程技术 > csharp  >  ASP.NET CORE实现跨域

ASP.NET CORE实现跨域

 更新时间：2022年3月13日 16:30  点击：531 作者：.NET开发菜鸟

一、后台API接口

用.net core创建一个Web API项目负责给前端界面提供数据。

二、前端界面

建立两个MVC项目，模拟不同的ip，在view里面添加按钮调用WEB API提供的接口进行测试跨域。view视图页代码如下：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>跨域测试1</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script>
        function btnGet() {
            $.ajax({
                url: 'https://localhost:44355/api/values',
                type: "Get",
                dataType: "json",
                success: function (data) {
                    alert("成功");
                },
                error: function (data) {
                    alert("失败");
                }
            });
        }
    </script>
</head>
<body>
    <div> 
        <input type="button" id="btn" value="测试跨域" onclick="btnGet()" />
    </div>
</body>
</html>

三、测试

1、不设置允许跨域

首先，先不设置.net core允许跨域，查看调用效果：

点击测试跨域1按钮：

F12进入Debug模式查看失败原因：

从这里可以看出来是因为产生了跨域问题，所以会失败。

点击测试跨域2的效果和此效果一致。

2、设置允许所有来源跨域

2.1、在StartUp类的ConfigureServices方法中添加如下代码：

// 配置跨域处理，允许所有来源
services.AddCors(options =>
options.AddPolicy("cors",
p => p.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials()));

2.2、修改Configure方法

// 允许所有跨域，cors是在ConfigureServices方法中配置的跨域策略名称
app.UseCors("cors");

2.3、测试

从截图中可以看出，这次调用成功了。

3、设置特定来源可以跨域

3.1、修改ConfigureServices方法代码如下：

//允许一个或多个来源可以跨域
services.AddCors(options =>
{
      options.AddPolicy("CustomCorsPolicy", policy =>
      {
             // 设定允许跨域的来源，有多个可以用','隔开
             policy.WithOrigins("http://localhost:21632")
             .AllowAnyHeader()
             .AllowAnyMethod()
             .AllowCredentials();
      });
});

这里设置只允许ip为http://localhost:21632的来源允许跨域。

3.2、修改Configure代码如下：

// 设定特定ip允许跨域 CustomCorsPolicy是在ConfigureServices方法中配置的跨域策略名称
app.UseCors("CustomCorsPolicy");

3.3测试

点击跨域测试1按钮，结果如下：

可以看到访问成功了，然后在点击跨域测试2按钮，结果如下：

发现这次访问失败了，F12进入Debug模式，查看失败原因：

从截图中可以看出是因为这里产生了跨域请求，但是没有允许跨域测试2所在的ip跨域。那么如果也想让跨域测试2可以调用成功该怎么办呢？

光标定位到WithOrigins上面，然后F12查看定义：

从截图中发现：WithOrigins的参数是一个params类型的字符串数组，如果要允许多个来源可以跨域，只要传一个字符串数组就可以了，所以代码修改如下：

//允许一个或多个来源可以跨域
services.AddCors(options =>
{
      options.AddPolicy("CustomCorsPolicy", policy =>
      {
            // 设定允许跨域的来源，有多个可以用','隔开
            policy.WithOrigins("http://localhost:21632", "http://localhost:24661")
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials();
      });
});

这时跨域测试2也可以调用成功了

4、优化

在上面的例子中，需要分两步进行设置才可以允许跨域，有没有一种方法只需要设置一次就可以呢？在Configure方法中只设置一次即可，代码如下：

// 设置允许所有来源跨域
app.UseCors(options =>
{
       options.AllowAnyHeader();
       options.AllowAnyMethod();
       options.AllowAnyOrigin();
       options.AllowCredentials();
});

// 设置只允许特定来源可以跨域
app.UseCors(options =>
{
        options.WithOrigins("http://localhost:3000", "http://127.0.0.1"); // 允许特定ip跨域
        options.AllowAnyHeader();
        options.AllowAnyMethod();
        options.AllowCredentials();
});

5、利用配置文件实现跨域

在上面的示例中，都是直接把ip写在了程序里面，如果要增加或者修改允许跨域的ip就要修改代码，这样非常不方便，那么能不能利用配置文件实现呢？看下面的例子。

5.1、修改appsettings.json文件如下：

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": {
    "url": "http://localhost:21632|http://localhost:24663"
  }
}

AllowedHosts里面设置的是允许跨域的ip，多个ip直接用“|”进行拼接，也可以用其他符合进行拼接。

5.2、增加CorsOptions实体类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace CorsDomainDemo
{
    public class CorsOptions
    {
        public string url { get; set; }
    }
}

5.3、 新增OptionConfigure方法

private void OptionConfigure(IServiceCollection services)
{
    services.Configure<CorsOptions>(Configuration.GetSection("AllowedHosts"));
}

5.4、在ConfigureServices方法里面调用OptionConfigure方法

// 读取配置文件内容
OptionConfigure(services);

5.5、修改Configure方法，增加IOptions<CorsOptions>类型的参数，最终代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;

namespace CorsDomainDemo
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            // 配置跨域处理，允许所有来源
            //services.AddCors(options =>
            //options.AddPolicy("cors",
            //p => p.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials()));

            //允许一个或多个来源可以跨域
            //services.AddCors(options =>
            //{
            //    options.AddPolicy("CustomCorsPolicy", policy =>
            //    {
            //        // 设定允许跨域的来源，有多个可以用','隔开
            //        policy.WithOrigins("http://localhost:21632", "http://localhost:24661")
            //          .AllowAnyHeader()
            //           .AllowAnyMethod()
            //           .AllowCredentials();
            //    });
            //});

            // 读取配置文件内容
            OptionConfigure(services);
            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env, IOptions<CorsOptions> corsOptions)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseHsts();
            }

            // 允许所有跨域，cors是在ConfigureServices方法中配置的跨域策略名称
            //app.UseCors("cors");

            // 设定特定ip允许跨域 CustomCorsPolicy是在ConfigureServices方法中配置的跨域策略名称
            //app.UseCors("CustomCorsPolicy");

            // 设置允许所有来源跨域
            //app.UseCors(options =>
            //{
            //    options.AllowAnyHeader();
            //    options.AllowAnyMethod();
            //    options.AllowAnyOrigin();
            //    options.AllowCredentials();
            //});

            // 设置只允许特定来源可以跨域
            //app.UseCors(options =>
            //{
            //    options.WithOrigins("http://localhost:3000", "http://127.0.0.1"); // 允许特定ip跨域
            //    options.AllowAnyHeader();
            //    options.AllowAnyMethod();
            //    options.AllowCredentials();
            //});

            // 利用配置文件实现
            CorsOptions _corsOption = corsOptions.Value;
            // 分割成字符串数组
            string[] hosts = _corsOption.url.Split('|');

            // 设置跨域
            app.UseCors(options =>
            {
                options.WithOrigins(hosts);
                options.AllowAnyHeader();
                options.AllowAnyMethod();
                options.AllowCredentials();
            });

            app.UseHttpsRedirection();
            app.UseMvc();
        }

        private void OptionConfigure(IServiceCollection services)
        {
            services.Configure<CorsOptions>(Configuration.GetSection("AllowedHosts"));
        }
    }
}

这样就可以实现利用配置文件实现允许跨域了。

到此这篇关于ASP.NET CORE实现跨域的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持猪先飞。

原文出处：https://www.cnblogs.com/dotnet261010/p/10177166.html

[!--infotagslink--]

相关文章

  • ASP.NET购物车实现过程详解

    这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22

  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25

  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15

  • .NET Core下使用Kafka的方法步骤

    这篇文章主要介绍了.NET Core下使用Kafka的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22

  • 在ASP.NET 2.0中操作数据之七十二：调试存储过程

    在开发过程中，使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误，同样Visual Studio也支持对SQL Server里面的存储过程进行调试，下面就让我们看看具体的调试方法。...2021-09-22

  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21

  • jQuery+slidereveal实现的面板滑动侧边展出效果

    我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15

  • PHP+jQuery翻板抽奖功能实现

    翻板抽奖的实现流程：前端页面提供6个方块，用数字1-6依次表示6个不同的方块，当抽奖者点击6个方块中的某一块时，方块翻转到背面，显示抽奖中奖信息。看似简单的一个操作过程，却包含着WEB技术的很多知识面，所以本文的读者应该熟...2015-10-21

  • 详解.NET Core 3.0 里新的JSON API

    这篇文章主要介绍了详解.NET Core 3.0 里新的JSON API，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22

  • SQLMAP结合Meterpreter实现注入渗透返回shell

    sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等，下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25

  • js实现跨域的4种实用方法原理分析

    什么是js跨域呐？js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。要...2015-10-30

  • ASP.NET Core根据环境变量支持多个 appsettings.json配置文件

    这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22

  • 记一次EFCore类型转换错误及解决方案

    这篇文章主要介绍了记一次EFCore类型转换错误及解决方案，帮助大家更好的理解和学习使用asp.net core，感兴趣的朋友可以了解下...2021-09-22

  • PHP实现今天是星期几的几种写法

    复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04

  • js实现跨域的4种实用方法原理分析

    什么是js跨域呐？js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。要...2015-10-30

  • 原生js实现fadein 和 fadeout淡入淡出效果

    js里面设置DOM节点透明度的函数属性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。 先来看看设置透明度的兼容性代码： 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07

  • 详解ASP.NET Core 中基于工厂的中间件激活的实现方法

    这篇文章主要介绍了ASP.NET Core 中基于工厂的中间件激活的实现方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-22

  • jQuery Jsonp跨域模拟搜索引擎

    这篇文章主要介绍了jQuery Jsonp跨域模拟搜索引擎的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下...2017-06-24

  • Android中用HttpClient实现Http请求通信

    本文我们需要解决的问题是如何实现Http请求来实现通信，解决Android 2.3 版本以后无法使用Http请求问题，下面请看正文。 Android开发中使用HttpClient来开发Http程序...2016-09-20

  • 原生JS封装Ajax插件(同域、jsonp跨域)

    这篇文章主要为大家详细介绍了原生JS封装Ajax插件，为大家介绍不同域之间互相请求资源的跨域...2016-05-05