跨域访问
vuejs-c# 解决跨域访问问题
什么是跨域访问
(我个人通过阅读网上资料的理解,仅仅为了让大家更好地理解)
1. 跨域访问 CORS
CORS = “Cross-Origin Resource Sharing”
中文含义就是跨域资源共享
2. 什么是域
我们的url主体一般包含两个部分,一个是ip,另一部分是port。
比如localhost:8080,localhost表示ip,8080表示port。
只有两个内容都相同才表示同域,否则就是不同域,不同域之间发送http请求就是跨域请求。
3. 出现跨域访问时长什么样
4. 为什么会有跨域访问问题
(纯个人理解,大佬勿喷)
要明白为什么会有跨域访问问题,那么首先我们要知道跨域访问会出现在什么样的场合
-
跨域访问出现的场合
我有很多看不懂,但是最主要的就是第一点,XMLHttpRequest或者Fetch APIs。
即在前端使用fetch或者使用XMLHttpRequest进行http请求的时候会出现这个问题那么为什么这些http请求的的时候不能直接通过,而要限制跨域请求呢?
-
为什么要限制跨域请求
很简单,因为不安全。简单的理解如下:
跨域请求的接受方应该是后端,对于后端程序来说,本域请求一定安全,因为就是自己本身。而其他域的请求,可能会导致更改或者获得后端的数据,所以不安全,所以会限制跨域的请求。
vuejs-c# 下解决跨域访问问题方式
(个人解决方式,请大佬指点)
前端
不用做特殊处理,逻辑上来说,只要在后端放开所有域的访问权限,就不会有跨域访问问题了(当然不是很安全,但是作为作业或者个人项目的解决方案已经足够了)。
后端
这里是c# web api的解决方案
- 进入Startup.cs
- 在ConfigureServices中加入以下代码
services.AddCors();
- 在Configure中加入以下代码
app.UseCors(builder => builder
.AllowAnyHeader()
.AllowAnyMethod()
.SetIsOriginAllowed((host) => true)
.AllowCredentials()
);
- 最终效果如下