跨域相关问题

最近遇到了一个项目,第一次和其他组的后端合作,由于域名也是新申请的,所以在合作过程中遇到了很多跨域的问题。现在自己做一下模拟总结。这里我的前端使用的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的就可以。

原文链接:segmentfault.com

上一篇:js使用xpath
下一篇:parse-links

相关推荐

  • (原创)vue-router的Import() 异步加载模块问题的解决方案

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 (/public/upload/e221e3db24c3f24a41062b6e4e389df8) 2、出现问题的代码点 (/publ...

    20 天前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • 高清屏下的1px边框问题

    基本概念 像素(css pixels) css像素或逻辑像素,单位是px,它是一个相对单位,在不同dpr(devicePixelRatio 设备像素比)设备中,1px代表的物理像素是不同的。

    2 年前
  • 项目整理11.27——axios相关

    1、配置请求的根路径 2、请求任意接口之前进行统一拦截判断 (https://img.javascriptcn.com/539d96611a9889...

    6 个月前
  • 项目整理11.26——登录相关

    1. vue引入axios 2.vue登录验证实现 image.png(https://img.javascriptcn.com/37881b743095e87e3d7e42622ce1c...

    6 个月前
  • 项目开发中常常会遇到详情返回列表,列表默认在点击详情的高度的问题,特此总结一下,希望可以帮到你们

    刚刚解了一个详情返回列表时候,列表高度保持在点击进去的详情的问题,特此做个分享,希望大家碰到类似的问题可以直接一遍过,不用卡壳(因为这个在实际项目开发中经常会用到所以分享了出来) Vue api 是...

    2 年前
  • 项目中上下切换遇到的问题

    在之前的项目中,需求是可以切换上一个和下一个进行浏览每一个列表中的数据。一开始我就使用的是索引下标来进行切换,初期的测试中谁页没有发现存在问题。后来上线使用过程中,发现有得页面在切换中或许会改变数据的...

    3 个月前
  • 项目中npm依赖问题

    最近开发遇到一个npm依赖导致的问题,报错如下。 sloterror(https://img.javascriptcn.com/804ed4a03d02191762c1f48473ba1711 "sl...

    2 年前
  • 页面跳转时,点击上报丢失问题解析

    背景 最近在工作中,遇到了页面跳转时点击上报丢失的问题,突出表现在微信ios的webview上,上报后直接跳转的失败率达到了惊人的93%。喝口水压压惊,开始逐步分析问题的发生。

    2 年前
  • 页面跳转中的安全问题

    最近参与了一小部分安全排查,涉及到一些前端编码安全问题,记个小tip。 1.Http请求头中的Referer 0a2b525c5fc64af362821115x362.png@900090f.p...

    6 个月前

官方社区

扫码加入 JavaScript 社区