这一节主要讲如何测试跨域问题
你可以直接在官网下载示例代码，也可以自己写，我这里直接使用官网样例进行演示
样例代码下载：
Cors
一.提供服务方,这里使用的是API
1.创建一个API项目。或者直接下载样例代码
2.像之前讲的那样设置允许CORS,例如：
public void Configure(IApplicationBuilder app, IHostingEnvironment env){ ???if (env.IsDevelopment()) ???{ ???????app.UseDeveloperExceptionPage(); ???} ???else ???{ ???????app.UseHsts(); ???} ???// Shows UseCors with CorsPolicyBuilder. ???app.UseCors(builder => ???{ ???????builder.WithOrigins("http://example.com", ???????????????????????????"http://www.contoso.com", ???????????????????????????"https://localhost:44375", ???????????????????????????"https://localhost:5001"); ???}); ???app.UseHttpsRedirection(); ???app.UseMvc();}使用的时候，注意 WithOrigins("https://localhost:<port>"); 这个地址替换为客户端地址(即调用方：这里指部分Razor代码)
二.客户端,这里指调用方(页面中js调用)，这里指Razor部分的代码
1.创建一个web 应用(Razor pages 或者 mvc )。样例用的Razor Pages 。
2.在index.cshtml中增加如下代码
@page@model IndexModel@{ ???ViewData["Title"] = "Home page";}<div class="text-center"> ???<h1 class="display-4">CORS Test</h1></div><div> ???<input type="button" value="Test" ???????????onclick="requestVal(‘https://<web app>.azurewebsites.net/api/values‘)" /> ???<span id=‘result‘></span></div><script> ???function requestVal(uri) { ???????const resultSpan = document.getElementById(‘result‘); ???????fetch(uri) ???????????.then(response => response.json()) ???????????.then(data => resultSpan.innerText = data) ???????????.catch(error => resultSpan.innerText = ‘See F12 Console for error‘); ???}</script>这里再多说一下，我的操作流程
首先，下载样例代码；
然后，在同一个解决方案中，导入Cors样例代码，如图
然后，可以先把解决方案设置为多个启动项目，启动，看下ClientApp的URL和WebAPI的URL
得到，我的url 分别如下：
ClientApphttp://localhost:65317/WebApihttp://localhost:65328/
先停止运行，分别设置api的withOrigin和client页面中的地址，代码如下：
WebAPI中的 StartupTest （这个跟Program使用的StartUp文件有关，样例代码中使用的StartUpTest）
// Shows UseCors with CorsPolicyBuilder. ???????????app.UseCors(builder => ???????????{ ???????????????builder.WithOrigins("http://example.com", ???????????????????????????????????"http://www.contoso.com", ???????????????????????????????????"https://localhost:44375", ???????????????????????????????????"http://localhost:65317"); ???????????});ClientApp中的Index.cshtml文件代码如下：
@page@model IndexModel@{ ???ViewData["Title"] = "Home page";}<div class="text-center"> ???<h1 class="display-4">CORS Test</h1></div><div> ???<h3>Test results:</h3> ???<span id=‘result‘></span></div><div> ???<input type="button" value="Test Widget 1" ??????????onclick="requestVal(‘https://webapi123.azurewebsites.net/api/widget/1‘)" /> ???<input type="button" value="Test All Widgets" ??????????onclick="requestJson(‘https://webapi123.azurewebsites.net/api/widget‘)" /> ???<input type="button" value="Test All Val" ??????????onclick="requestJson(‘https://webapi123.azurewebsites.net/api/values‘)" /> ???<input type="button" value="Test Val 1" ??????????onclick="requestVal2(‘https://webapi123.azurewebsites.net/api/values/1‘)" /> ???<input type="button" value="Test Val 2" ??????????onclick="requestVal2(‘http://localhost:65328/api/values‘)" /> ???<input type="button" value="Test Val 3" ??????????onclick="requestJson(‘http://localhost:65328/api/values‘)" /></div><script> ???function requestJson(uri) { ???????const resultSpan = document.getElementById(‘result‘); ???????fetch(uri) ???????????.then(response => response.json()) ???????????.then(data => resultSpan.innerText = data) ???????????.catch(error => resultSpan.innerText = ‘See F12 Console for error‘); ???}</script><script> ???function requestVal2(uri) { ???????const resultSpan = document.getElementById(‘result‘); ???????fetch(uri) ???????????.then(response => response.text()) ???????????.then(data => resultSpan.innerText = data) ???????????.catch(error => resultSpan.innerText = ‘See F12 Console for error‘); ???}</script>再运行，测试
发现当WebApi中的 WithOrigins 设置正确时，不会报跨域问题，
否则，报跨域问题。
跨域错误截图
如有疑问，可以参考网址：
https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2#cors-policy-options
asp.net core 系列之允许跨域访问2之测试跨域(Enable Cross-Origin Requests:CORS)
原文地址：https://www.cnblogs.com/Vincent-yuan/p/10801517.html