前后端解决跨域问题（.net core6/vue2）_negotiate?negotiateversion=1-优快云博客

在构建前后端分离系统时，跨域是一个常见问题。当前端（如Vue）从8080端口向7266端口发起请求时，浏览器会因CORS策略报错。前端可以通过在vue.config.js中配置devServer代理来转发请求，后端（如.NETCore）则可以设置CORS策略允许任何来源，如AllowAnyOrigin、AllowAnyHeader和AllowAnyMethod，以实现跨域。这样既能解决请求被拦截的问题，也允许不同源的通信。

跨越问题是我们在构建前后端分离系统中需要解决的第一个问题，很多人在编写好前后端程序后，开始测试从前台发请求到后端时，浏览器一直报跨域请求出错。

Access to fetch at 'https://localhost:7266/JoinChat/negotiate?negotiateVersion=1' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

所以为了解决这个问题我们需要设置跨域。

首先说一下什么是跨域。

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

比如上面引用的错误就是端口不同，从8080端口请求7266端口的服务时被拦截。

前端解决办法

既然我们直接发请求会被拦截，那么我们就通过一个服务器代理帮我们发请求，并使这个代理上开启跨域。

在vue.config.js文件中配置devSever代理，这个代理会先拦截所有请求，然后将路径中开头为/api的链接转发到https://localhost:7266/，并去掉/api

module.exports={
    devServer: {
        proxy: {
          '/api':{
            target:'https://localhost:7266/', //请求后台接口
            changeOrigin:true, // 允许跨域
            pathRewrite:{
                '^/api' : '' // 重写请求
            }
        }
        }
    }
}

例如，我们用axios发送一个请求到 https://localhost:7266/WeatherForecast/GetPrice，一般情况下，我们会将请求路径完整的写到方法中，如axios.get('https://localhost:7266/WeatherForecast/GetPrice?name='+this.goodsName)

如果你设置了代理，你只需要写axios.get('/api/WeatherForecast/GetPricename='+this.goodsName)

因为代理会默认拦截所有本服务器上所有请求，写全路径它就无法识别是否需要转发。

如果你有不同的请求需要请求多个不同端口或服务器，只需要在代理中配置多个转发路径即可。

后端解决办法

后端实现跨域也非常简单，只需要配置一下就行

Program.cs (.net core 6)

//先注册服务
builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(
                      policy =>
                      {
                          //允许指定来源的访问
                          //policy.WithOrigins("http://localhost:8081",
                          //                    "http://localhost:8080")
                          policy.AllowAnyOrigin()//允许所有来源的访问
                          .AllowAnyHeader()//允许所有类型的请求头
                          .AllowAnyMethod();//允许所有类型的请求
                          //开启允许所有来源后，不能设定要求有认证
                          //policy.AllowCredentials();
                      });
});

//再使用服务
//跨域应该加再开启HTTPS请求之前
app.UseCors();

app.UseHttpsRedirection();

这样困扰我们的跨域问题就解决了，希望本文能帮助到你！