一笑·科奉

Vue实现跨域访问Asp.Net Core Api(Cors)

作者: 一笑, 写于: 2019-09-22 14:53:40

注:如果Api和Vue项目已经架设完毕,请直接查看第3步。


1、创建Asp.net core api项目

image.png

image.png

F5运行后,一个简单的API示例就有了。

2、安装Vue+axios

注:未安装Vue cli3的请先安装Vue Cli3

创建vue cli3项目

vue create projectname

安装axios(用以调用API)

cd project
npm install axios

image.png

配置vue项目使用axios:打开projectname\src\main.js添加调用axios

image.png

运行Vue项目

cd projectname
npm run serve

image.png

访问http://localhost:8080/

image.png


至此vue+axios项目安装完成

3、调用API(未配置跨域)

在App.vue页面的</template>下方增加如下代码

<script>
export default {
    created () {
        this.$http.get('http://localhost:55170/api/values').then(function(response){
			console.log(response);
		});
    }
}
</script>

注:http://localhost:55170/api/values  是asp.net core api运行时的路径

加入后,可发现报错

image.png

Failed to load http://localhost:55170/api/values: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.


4、配置跨域

修改api项目中的Startup.cs页面

首先:在ConfigureServices方法中增加如下代码:

services.AddCors(options => {
                options.AddPolicy("_myAllowSpecificOrigins", builder => {
                    builder
                    .WithOrigins("http://localhost:8080")//只开通指定几个站的访问
                    .WithMethods("GET", "POST")//只开通GET、POSTP请求
                    .WithHeaders("X-Custom-Header", "t3exebs");//只同意有这个HEADER信息的请求
                });
            });

然后在Configure方法中增加如下代码:(注意:一定要加在app.UseMvc()之上)

app.UseCors("_myAllowSpecificOrigins");

最终:

image.png

说明:

* WithOrigins里的参数可以是多个,即可以设定多个跨域访问的域名地址,注意最后不要有/

* 如果想设置为本api开放所有域访问,则可直接使用AllowAnyOrigin()

另外,除了设置Origins外,Headers和Methods也是需要设置的,否则也会报错。

5、调用API(已配置跨域)

再次运行API和VUE,刷新下http://localhost:8080 ,可以看到VUE中已经可以获取到不同域的API数据了。

image.png


分类: 未分类, 浏览: 161, 评论: 0
原创文章转载请注明:转自《一笑·科奉》 原文地址:https://www.kefong.com/post/113.html