前端上传到服务端报错'Access-Control-Allow-Origin'

flyer_dev 发布于2019-08-22 18:47 / 872人阅读

摘要：问题与解决办法前端携带凭证信息请求服务端接口，当后台这样设置时，遇到报错，不能为当请求的证书模式为时这是你的请求没有通过的原因这个证书模式初始化是通过的属性控制的虽然有报错，但请求数据是成功的。

问题与解决办法

前端携带cookie凭证信息请求服务端接口，当后台"Access-Control-Allow-Origin":*这样设置时，遇到报错，

Access-Control-Allow-Origin不能为 * ,当请求的证书模式为“include”时
这是你的请求没有通过的原因
这个证书模式初始化是通过Ajax的withCredentials属性控制的

虽然有报错，但请求数据是成功的。只不过请求成功之后的操作无法进行下去

要解决这个报错问题，前端需要对withCredentials参数设置 withCredentials: false,

 this.$axios({
    method: "post",
    url:"http://upload-z2.qiniup.com/",         // 七牛云的上传地址，根据自己所在地区选择，我这里是华南区
    headers: {
        "Content-Type": "multipart/form-data"
    },
    withCredentials: false,
    data:formdata
}).then((res)=>{
    console.log(res.data)

})

敲黑板，知识点：

后台用session记录的用户登录
1、前端发出的请求如果是携带Cookie身份信息

2、服务端的Access-Control-Allow-Origin如果设置的是*

那么这个请求会失败，在Options预请求时会被拦截下来。

参考文献

MDN文档：
https://developer.mozilla.org...

云服务器 GPU云服务器文字自动&039&039到google 域名服务器端口&039&039 attr&039&039checked&039&039 given&039&039

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96196.html

You don&#039;t know cross-origin

摘要：为什么会存在跨域问题同源策略由于出于安全考虑，浏览器规定不能操作其他域下的页面，不能接受其他域下的请求不只是，引用非同域下的字体文件，还有引用非同域下的图片，也被同源策略所约束只要协议域名端口有一者不同，就被视为非同域。 showImg(https://segmentfault.com/img/remote/1460000017093859?w=1115&h=366); Why 为什么...

hersion 2019-08-26 13:25 评论0 收藏0
SVN更新报错问题（Please execute the &#039;Cleanup&#039; c

摘要：问题描述在更新的过程中，可能中途会取消，取消之后再次更新时可能提示，如下图下载工具，进入此下载地址将文件解压缩到目录的同级目录打开命令行工具，切换到的同级目录，执行如下命令该命令可以查看当前挂起的操作该命令可以删除当前挂起的操作执行删除后再问题描述在更新svn的过程中，可能中途会取消，取消之后再次更新时可能提示，如下图： showImg(https://segmentfault.c...

hqman 2019-08-16 12:18 评论0 收藏0
react用子组件(有RouteComponentProps)报错：&#039;match&#039

摘要：因为子组件有，所以在父组件中引用需要传相应的属性。但考虑到如果层级较深的话一层一层传就很麻烦。而如果我们用组件引用的话就会很简单，只需要在需要子组件的地方用的属性就可以了手机号因为子组件有RouteComponentProps，所以在父组件中引用需要传相应的属性。但考虑到如果层级较深的话一层一层传就很麻烦。而如果我们用route组件引用的话就会很简单，只需要在需要子组件的地方用rou...

wangjuntytl 2019-08-26 13:53 评论0 收藏0
canvas.toDataURL(&#039;image/png&#039;)报错处理方法

摘要：前段时间做一个项目，需求是对每个视频添加预览图，这个问题最终选择方案是用来做转换获取视频的一个截图，添加到页面中，达到自动添加预览图的目的。前段时间做一个项目，需求是对每个视频添加预览图，这个问题最终选择方案是：用canvas.toDataYRL();来做转换获取视频的一个截图，添加到页面中，达到自动添加预览图的目的。部分代码如下： var testVideo = document....

idisfkj 2019-08-21 15:55 评论0 收藏0