asp.net core 系列之允许跨域访问2之测试跨域(Enable Cross-Origin Requests:CORS)

 

这一节主要讲如何测试跨域问题

 

你可以直接在官网下载示例代码，也可以自己写，我这里直接使用官网样例进行演示

样例代码下载：

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