Vue 项目中遇到的跨域问题及解决方法

问题描述

前端 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,如果你没加上面那段代码当然也不会报这个错。虽然是解决方法很简单,但经此发现许多知识没掌握不得不梳理下。

跨域请求想要带上 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
}

跟之前一样就行了。

.NET CORE

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

PHP后台代码:

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

前端代码:

xhrFields: {
 withCredentials: false
},

.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
}

Original: https://www.cnblogs.com/xcsn/p/11272959.html
Author: 心存善念
Title: Vue 项目中遇到的跨域问题及解决方法

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/553996/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球