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
    }
    
  • 相关阅读:
    解决多个window.onload冲突问题
    asp.net中img底部出现空白解決辦法
    学习WF起步
    ASP.NET后台注册javascript脚本方法
    WCF、Net remoting、Web service概念及区别
    WCF问答 WCF 与Web Service的区别
    C++深度探索系列:智能指针(Smart Pointer) [一] (转)
    ofstream和ifstream(详细2)转
    全面掌握const、volatile和mutable关键字(转)
    #define用法 收藏
  • 原文地址:https://www.cnblogs.com/xcsn/p/11272959.html
Copyright © 2011-2022 走看看