zoukankan      html  css  js  c++  java
  • 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
    }
    
  • 相关阅读:
    用JavaScript 来创建 mac os x 程序这样是否好
    hadoop的namenode无法启动的解决的方法
    Cocos2d-x新建模板编译问题总汇
    JBoss AS 7之基本配置和部署(The Return Of The King)
    margin和padding的学习
    HDU 1232 畅通project
    C/C++程序内存分类
    iOS 推断设备为iPhone还是iPad
    or1200中载入存储类指令说明
    专业词汇-计算机:占位符
  • 原文地址:https://www.cnblogs.com/xcsn/p/11272959.html
Copyright © 2011-2022 走看看