这一节主要讲如何测试跨域问题
你可以直接在官网下载示例代码，也可以自己写，我这里直接使用官网样例进行演示
样例代码下载：
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 分别如下：
clientapp http://localhost:65317/ webapi http://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
黄山市民网：https://www.huangshanshimin.com/
