跨域相关问题

2019-05-17 admin

最近遇到了一个项目,第一次和其他组的后端合作,由于域名也是新申请的,所以在合作过程中遇到了很多跨域的问题。现在自己做一下模拟总结。这里我的前端使用的vue,后端使用的express。没有使用vue的proxyTable,就是作为后端解决一下这个跨域

解决代码

app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://h5.xesv5.com:8081')
    res.header('Access-Control-Allow-Credentials', true)
    res.header("Access-Control-Allow-Headers", "Content-Type,Accept,X-Requested-With,traceid,rpcid")
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
    res.header("Content-Type", "application/json;charset=utf-8")
    if (req.method == 'OPTIONS') {
        res.sendStatus(200)
    } else {
        if (req.path.indexOf('/getUserInfo') < 0 && (!req.session || !req.session.userInfo)) {
            res.send({
                stat: 1230,
                message: '登录失效'
            })
        } else {
            next()
        }
    }
})

问题一:域名不一致的跨域提示

现象:

图片描述

Response to preflight request doesn't pass access control check: No 'Access-Control-Origin' header is present on the requested resource.

解决办法:

设置Access-Control-Allow-Orign。我的后端一开始只设置了允许http://pylon.xueersi.com域名,但是没有带上端口号,带上端口号即可。

问题二: 后端没有设置Access-Control-Allow-Credentials

当前端设置withCredentials:true时,表示前端允许跨域的后端接口种cookie

现象:

图片描述

The value of the 'Access-Control-Allow-Crentials' header in the response is '' which must be 'true' when the request's crentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute

解决办法:

后端也需要在请求头设置Access-Control-Allow-Credentials:true

问题三:设置Credentials后,Access-Control-Allow-Origin需要指定域名,不可以设置*

图片描述

问题四:前端在请求头上设置了参数,后端需要允许请求头设置该参数

现象:

图片描述

Request header field token is not allowed by Access-Control-Allow-Headers in preflight response

解决办法:

如果前端需要在请求头里加上token字段,后端这边需要Access-Control-Allow-Headers设置

 res.header("Access-Control-Allow-Headers", "Content-Type,Accept,X-Requested-With,token")

补充:axios请求头设置参数

config.headers.common['token'] = 123

问题五:协议不同产生的问题

现象:

由于投放出去的链接是https的,但是之前我们测试使用的都是http协议的链接。后来改成https的时候,提示下面的错误: 图片描述 Mixed Content: The page at 'https://xxx.com/#/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint. This request has been blocked: the content must be serverd over HTTPS

我的第一反应其实这也是一个跨域的问题,因为一个是http一个是https,后端只允许了http://xx,没有允许https协议的链接,但是报的错误是Mixed Content,这算是安全策略的报错,浏览器禁止了https协议访问http协议的资源和接口,大概是浏览器首先检测到的是这个安全策略的问题。 后来我把所有的接口协议修改为:’//xxx.com/xxx’后,继续报错,说明这个时候浏览器开始进一步检测跨域的问题:

图片描述

Response to preflight request doesn't pass access control check: The 'Access-control-Allow-Origin' header has a value 'http://xx.com' that is not equal to the supplied origin.

原因很简单:就是跨域的Access-Control-Allow-Origin设置的是http协议的,运维老师加上https的就可以。

[转载]原文链接:https://segmentfault.com/a/1190000019214615

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65210.html

文章标题:跨域相关问题

相关文章
简述AngularJS相关的一些编程思想
在过去的几个月里,我一直遨游于Angular的世界。如今回想起来,很难想象在没有类似于Angular.js, Backbone.js以及其伙伴Underscore.js这些数据绑定框架下我每天如何去编写一个大型前端应用。我不敢相信我已经用它...
2017-03-24
JavaScript的jQuery库中function的存在和参数问题
jQuery function 参数传递 jQuery的function函数中使用外部变量: &#x2F;&#x2F;如何取得i的变量 for(i=0;i&lt;3;i++) { $.get(&quot;&#x2F;test.html&q...
2017-03-29
nodejs爬虫抓取数据乱码问题总结
一、非UTF-8页面处理. 1.背景 windows-1251编码 比如俄语网站:https://vk.com/cciinniikk 可耻地发现是这种编码 所有这里主要说的是 Windows-1251(cp1251)编码与utf-8编码的...
2017-03-26
javascript相关事件的几个概念
客户端javascript程序采用了异步事件驱动编程模型。 相关事件的几个概念: **事件类型(event type):**用来说明发生什么类型事件的字符串; **事件目标(event target):**发生事件的对象; **事件处理程序...
2017-03-23
javascript解决IE6下hover问题的方法
有时候我们想在非a标签上加hover元素 但是我们都知道IE6下不支持XX:hover,所以我们现在可以用js实现掉:代码如下 &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x...
2017-03-27
kindeditor修复会替换script内容的问题
kindeditor一些个人修改 1.替换script里面的内容的问题 2.颜色选择器扩展,复制的fck编辑器选颜色 3.swfupload.swf上传前图片预览功能 kindeditor.js function _formatHtml(h...
2017-03-22
浅谈js 闭包引起的内存泄露问题
在js闭包中,可以定义“局部变量”,但是外部去调用的话,尤其是反复调用赋值,会造成内存的大量开销。如何防止这种现象的发生?关于闭包还有没有类似的内存或效率问题需要注意?如何去规避? 内存问题可能是如下原因造成: 1. 循环引用导致了内存泄漏...
2017-03-24
js跨域请求的5中解决方式
跨域请求数据解决方案主要有如下解决方法: JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一、JSONP: 直观的理解: 就是在客户端动态注册一个函数 fun...
2017-03-26
浅谈NodeJS中require路径问题
项目需要用nodejs,感觉nodejs是前端装逼神器了,是通向全栈工程师的必经之路哇,接下来开始踏上学习nodejs的征程。下面是第一个hello,world的程序。 1、server.js文件,这相当于服务器脚本。 var http =...
2017-03-23
vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三方样式变小的问题
最近公司的的项目赶,作为前端的小白懒出新的高度,使出专业的技能 --复制粘贴!!(改别人的代码也是煎熬) 我经常做一些H5页面,这样就会遇到适配这个头疼的问题,我分享下我用经常用到的适配方案: 这里就不细说了 有大神总结 ,或者自行百度。 ...
2018-04-25
回到顶部