Vue 踩坑-1-跨域问题

这个坑应该是趟了两遍了，被自己给笨到了，故进行一次总结，记录！

感谢老张的跨域解析：【.NET Core 3.0】框架之十二 || 跨域 与 Proxy
（早看到就不至于花那么多时间了，终究还是自己知识储备不够！）

为什么要跨域？

跨域，顾名思义，自然是我在做某些操作时，需要从本身所在的“域”向目标“域”进行请求（例如请求接口）。

在我们进行操作时，会引发同源问题，一般该问题源于浏览器的同源策略。

• 同源是在协议、端口和域名都相同时，才能构成同源，否则其中任意一个不同都会造成跨域。
• 同源策略是浏览器的一个安全功能，主要是限制不同源之间的文档或脚本在没有明确的授权下进行操作，隔离潜在恶意文件的重要安全机制。

所以，我们需要对需要访问的域进行一个标注。

怎么实现跨域？

1、CORS跨域

该方式偏向后端，主要是在后台服务中进行配置，缺点主要在与如果前端端口或者是域名更改，则需要后端的更改适配

1. ​ 配置CORS

   在.NET Core项目中，我们需要在startup.cs 启动文件的 ConfigureServices 中添加如下配置：

   services.AddCors(c =>
    {
        // 配置策略
        c.AddPolicy("LimitRequests", policy =>
        {
            // 支持多个域名端口，注意端口号后不要带/斜杆：比如localhost:8000/，是错的
            // http://127.0.0.1:1818 和 http://localhost:1818 是不一样的，尽量写两个
            policy
            .WithOrigins("http://127.0.0.1:1818", "http://localhost:8080", "http://localhost:8021", "http://localhost:8081", "http://localhost:1818")
            .AllowAnyHeader()//允许任意头
            .AllowAnyMethod();//允许任意方法
        });
    });
   

2. 添加CORS中间件

   public void Configure(IApplicationBuilder app)
   {
     ...
   
     app.UseStaticFiles();
   
     app.UseRouting();
     app.UseCors();//添加 Cors 跨域中间件
   
     app.UseAuthentication();
     app.UseAuthorization();
   
     app.UseEndpoints(endpoints => {
        endpoints.MapControllers();
     });
   }
   

2、Proxy跨域

该方式仅用于开发环境，发布后就失效了（被这个坑了），仅针对于Vue cli 3

1. ​ 添加vue.config.js文件

   （Vue cli 3之前的版本则是在config文件夹中进行配置。)

   在vue cli 3下不存在该文件，则于Vue项目根目录下添加vue.config.js文件。

2. 配置Proxy

   module.exports = {
       devServer: {
         proxy: {
           // 名字可以自定义，用于指定哪些请求需要被 target 对应的主机代理
           // 当前 devServer 的地址是 localhost:8080 , 需要代理的地址是 localhost:3000
           '/api': {
             target: 'https://localhost:44313/',  // 设置你调用的接口域名和端口号 别忘了加http
             changeOrigin: true, // 这里设置是否跨域
             pathRewrite: { // 路径重写
               '^/api': ''
             }
           }
       }
     }
   }
   

3、Nginx跨域

该方法得使用Nginx进行Vue的反向代理，如果你的大佬叫你老老实实的用IIS，你还是用第一种方式

1. ​ 安装Nginx与上传打包文件

   看老张的教程： 【.NET Core 3.0】框架之十二 || 跨域 与 Proxy

2. 配置nginx.conf文件

   Windows下该文件位于Nginx安装目录下的 config文件夹下

   Linux下位于etc/nginx文件夹下

      server {
           listen       8077;#监听端口，也就是我们的项目端口
           server_name  localhost;#服务器主机
   
           location / {
               root   html;#监听文件夹，默认是nginx下的html文件夹，也可以自定义物理路径 E:\Nginx\test
               index  index.html index.htm;#默认首次启动的文件
           }
   
   　　　　 #配置本地代理规则
           location /api {#名字取一个 api
               rewrite  ^.+apb/?(.*)$ /$1 break; #路径重写机制（无用，但是你也可以自己定义，对路由进行变化）
                  include  uwsgi_params;
               proxy_pass   http://localhost:8081; #api接口的域名地址
           }
   

3. 记得配置完了重启Nginx。