vuejs-c# 解决跨域访问问题

vuejs-c# 解决跨域访问问题

什么是跨域访问

(我个人通过阅读网上资料的理解，仅仅为了让大家更好地理解)

1. 跨域访问 CORS

CORS = “Cross-Origin Resource Sharing”
中文含义就是跨域资源共享

2. 什么是域

我们的url主体一般包含两个部分，一个是ip，另一部分是port。
比如localhost:8080，localhost表示ip，8080表示port。
只有两个内容都相同才表示同域，否则就是不同域，不同域之间发送http请求就是跨域请求。

3. 出现跨域访问时长什么样

4. 为什么会有跨域访问问题

(纯个人理解，大佬勿喷)
要明白为什么会有跨域访问问题，那么首先我们要知道跨域访问会出现在什么样的场合

1. 跨域访问出现的场合

   下面是MDN对什么时候会使用CORS的解释
   

   我有很多看不懂，但是最主要的就是第一点，XMLHttpRequest或者Fetch APIs。
   即在前端使用fetch或者使用XMLHttpRequest进行http请求的时候会出现这个问题

   那么为什么这些http请求的的时候不能直接通过，而要限制跨域请求呢？

2. 为什么要限制跨域请求

   很简单，因为不安全。简单的理解如下：

   跨域请求的接受方应该是后端，对于后端程序来说，本域请求一定安全，因为就是自己本身。而其他域的请求，可能会导致更改或者获得后端的数据，所以不安全，所以会限制跨域的请求。

vuejs-c# 下解决跨域访问问题方式

(个人解决方式，请大佬指点)

前端

不用做特殊处理，逻辑上来说，只要在后端放开所有域的访问权限，就不会有跨域访问问题了（当然不是很安全，但是作为作业或者个人项目的解决方案已经足够了）。

后端

这里是c# web api的解决方案

1. 进入Startup.cs
2. 在ConfigureServices中加入以下代码

services.AddCors();

3. 在Configure中加入以下代码

app.UseCors(builder => builder
                .AllowAnyHeader()
                .AllowAnyMethod()
                .SetIsOriginAllowed((host) => true)
                .AllowCredentials()
            );

4. 最终效果如下