用.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>首先，先不设置.net core允许跨域，查看调用效果：
点击测试跨域1按钮：
f12进入debug模式查看失败原因：
从这里可以看出来是因为产生了跨域问题，所以会失败。
点击测试跨域2的效果和此效果一致。
// 配置跨域处理，允许所有来源rvices.addcors(options =>options.addpolicy("cors",p => p.allowanyorigin().allowanyheader().allowanymethod().allowcredentials()));// 允许所有跨域，cors是在configurervices方法中配置的跨域策略名称app.ucors("cors");从截图中可以看出，这次调用成功了。
//允许一个或多个来源可以跨域rvices.addcors(options =>{ options.addpolicy("customcorspolicy", policy => { // 设定允许跨域的来源，有多个可以用','隔开 policy.withorigins("http:什么最长//localhost:21632") .allowanyheader() .allowanymethod() .allowcredentials(); });});这里设置只允许ip为http://localhost:21632的来源允许跨域。
// 设定特定ip允许跨域 customcorspolicy是在configurervices方法中配置的跨域策略名称app.ucors("customcorspolicy");点击跨域测试1按钮，结果如下：
可以看到访问成功了，然后在点击跨域测试2按钮，结果如下：
发现这次访问失败了，f12进入debug模式，查看失败原因：
从截图中可以看出是因为这里产生了跨域请求，但是没有允许跨域测试2所在的ip跨域。那么如果也想让跨域测试2可以调用成功该怎么办呢？
光标定位到withorigins上面，然后f12查看定义：
从截图中发现：withorigins的参数是一个params类型的字符串数组，如果要允许多个来源可以跨域，只要传一个字符串数组就可以了，所以代码修改如下：
//允许一个或多个来源可以跨域rvices.addcors(options =>{ options.addpolicy("cus化学式配平tomcorspolicy", policy => { // 设定允许跨域的来源，有多个可以用','隔开 policy.withorigins("http://localhost:21632", "http://localhost:24661") .allowanyheader() .allowanymethod() .allowcredentials(); });});这时跨域测试2也可以调用成功了
在上面的例子中，需要分两步进行设置才可以允许跨域，有没有一种方法只需要设置一次就可以呢？在configure方法中只设置一次即可，代码如下：
// 设置允许所有来源跨域app.ucors(options =>{ options.allowanyheader(); 战机飞行员 options.allowanymethod(); options.allowanyorigin(); options.allowcredentials();});// 设置只允许特定来源可以跨域app.ucors(options =>{ options.withorigins("http://localhost:3000", "http://127.0.0.1"); // 允许特定ip跨域 options.allowanyheader(); options.allowanymethod(); options.allowcredentials();});在上面的示例中，都是直接把ip写在了程序里面，如果要增加或者修改允许跨域的ip就要修改代码，这样非常不方便，那么能不能利用配置文件实现呢？看下面的例子。
{ "logging": { "loglevel": { "default": "warning" } }, "allowedhosts": { "url": "http://localhost:21632|http://localhost:24663" }}allowedhosts里面设置的是允许跨域的i青春作证p，多个ip直接用“|”进行拼接，也可以用其他符合进行拼接。
using system;using system.collections.generic;using system.linq;using system.threading.tasks;namespace corsdomaindemo{ public class corsoptions { public string url { get; t; } }}private void optionconfigure(irvicecollection rvices){ rvices.configure<corsoptions>(configuration.getction("allowedhosts"));}// 读取配置文件内容optionconfigure(rvices);
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. u this method to add rvices to the container. public void configurervices(irvicecollection rvices) { // 配置跨域处理，允许所有来源 //rvices.addcors(options => //options.addpolicy("cors", //p => p.allowanyorigin().allowanyheader().allowanymethod().allowcredentials())); //允许一个或多个来源可以跨域 //rvices.addcors(options => //{ // options.addpolicy("customcorspolicy", policy => // { // // 设定允许跨域的来源，有多个可以用','隔开 // policy.withorigins("http://localhost:21632", "http://localhost:24661") // .allowanyheader() // .allowanymethod() // .allowcredentials(); // }); //}); // 读取配置文件内容 optionconfigure(rvices); rvices.addmvc().tcompatibilityversion(compatibilityversion.version_2_1); } // this method gets called by the runtime. u this method to configure the http request pipeline. public void configure(iapplicationbuilder app, ihostingenvironment env, ioptions<corsoptions> corsoptions) { if (env.isdevelopment()) { app.udeveloperexceptionpage(); } el { app.uhsts(); } // 允许所有跨域，cors是在configurervices方法中配置的跨域策略名称 //app.ucors("cors"); // 设定特定ip允许跨域 customcorspolicy是在configurervices方法中配置的跨域策略名称 //app.ucors("customcorspolicy"); // 设置允许所有来源跨域 //app.ucors(options => //{ // options.allowanyheader(); // options.allowanymethod(); // options.allowanyorigin(); // options.allowcredentials(); //}); // 设置只允许特定来源可以跨域 //app.ucors(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.ucors(options => { options.withorigins(hosts); options.allowanyheader(); options.allowanymethod(); options.allowcredentials(); }); app.uhttpsredirection(); app.umvc(); } private void optionconfigure(irvicecollection rvices) { rvices.configure<corsoptions>(configuration.getction("allowedhosts")); } }}这样就可以实现利用配置文件实现允许跨域了。
到此这篇关于asp.net core实现跨域的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文发布于:2023-04-06 03:33:38，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/f8685345c84675303f8890db03b73681.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：ASP.NET CORE实现跨域.doc
本文 PDF 下载地址：ASP.NET CORE实现跨域.pdf
| 留言与评论（共有 0 条评论） |
