代码改变世界
[登录 · 注册]
  • Vue 项目中遇到的跨域问题及解决方法
  • 原文:https://www.jb51.net/article/137278.htm

    问题描述

    前端 vue 框架,跨域问题后台加这段代码
    header("Access-Control-Allow-Origin: *");
    加了之后报这个错:

    The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. 
    The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
    

    解决办法

    文章链接:CORS: credentials mode is ‘include'

    xhrFields: {
     withCredentials: false
    },
    

    把 withCredentials: true 改成 withCredentials: false,如果你没加上面那段代码当然也不会报这个错。虽然是解决方法很简单,但经此发现许多知识没掌握不得不梳理下。

    HTTP 请求方式有许多种,有些请求会触发 CORS 预检请求。“需预检的请求”会使用 OPTIONS 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。
    对于跨域请求浏览器一般不会发送身份凭证信息。如果要发送凭证信息,需要设置 XMLHttpRequest 的 withCredentials 属性为 true:withCredentials: true。此时要求服务器的响应信息中携带 Access-Control-Allow-Credentials: true,否则响应内容将不会返回。

    跨域请求想要带上 cookies 必须在请求头里面加上:

    crossDomain: true, 
    xhrFields: {
      withCredentials: true
    }
    

    又变成文章开头的问题了,解决办法:

    后台代码:

    Access-Control-Allow-Origin: 'http://www.zrt.local:8080'
    Access-Control-Allow-Credentials: true
    

    前端代码:

    crossDomain: true, 
    xhrFields: {
      withCredentials: true
    }
    

    跟之前一样就行了。

    总结

    1.不限定跨域地址,不携带身份凭证

    .NET CORE

    services.AddCors(
                    options => options.AddPolicy(
                        _defaultCorsPolicyName,
                        builder => builder 
                            .AllowAnyOrigin()
                            .AllowAnyHeader()
                            .AllowAnyMethod()
                            .AllowCredentials()
                    )
                );
    

    PHP后台代码:

    header("Access-Control-Allow-Origin: *");
    

    前端代码:

    xhrFields: {
     withCredentials: false
    },
    

    2.指定授权访问地址,携带身份凭证(带cookies)

    .NET CORE

    services.AddCors(
                    options => options.AddPolicy(
                        _defaultCorsPolicyName,
                        builder => builder
    						.WithOrigins(
    							// App:CorsOrigins 在 appsettings.json 中,可配多个地址
    							_appConfiguration["App:CorsOrigins"]
    							   .Split(",", StringSplitOptions.RemoveEmptyEntries)
    								.Select(o => o.RemovePostFix("/"))
    								.ToArray()
    						) 
                            .AllowAnyHeader()
                            .AllowAnyMethod()
                            .AllowCredentials()
                    )
                );
    

    PHP后台代码:

    Access-Control-Allow-Origin: 'http://www.zrt.local:8080'
    Access-Control-Allow-Credentials: true
    

    前端代码:

    crossDomain: true, 
    xhrFields: {
      withCredentials: true
    }
    
  • 上一篇:mosquitto 常用命令
    下一篇:MYSQL获取自增ID的四种方法
  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文:https://www.cnblogs.com/xcsn/p/11272959.html
走看看 - 开发者的网上家园