资讯专栏INFORMATION COLUMN

今天学习的两个知识点

alanoddsoff / 882人阅读

摘要:调试遇到的前后端跨域问题在学习笔记对象介绍和学习笔记实现跨域资源共享以及和的对比跨域方式中,我对对象实现给出了较为全面的总结,并且对同源策略以及跨域访问给出了常见的解决方案使用和头部信息实现跨域资源共享。

调试TCMngr遇到的前后端跨域问题

在《AJAX学习笔记1:XHR对象介绍》和《AJAX学习笔记2:XHR实现跨域资源共享(CORS)以及和JSONP的对比》《JavaScript跨域方式》中,我对XHR对象实现AJAX给出了较为全面的总结,并且对同源策略以及跨域访问给出了常见的解决方案:使用JSONP和HTTP头部信息实现跨域资源共享。在TCM项目中,后台数据通过线上接口提供,也就是实现了跨域,在配置中通过Nodejs+express API实现了跨域,代码如下:

        var express = require("express"),
            app = express();
        //允许跨域访问
        app.all("*",function (req, res, next) {
            res.header("Access-Control-Allow-Origin", "*");
            res.header("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild");
            res.header("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
        
            if (req.method == "OPTIONS") {
                res.send(200);
            }
            else {
                next();
            }
        });

虽然通过设置头部信息允许跨域,但是实际开发中依旧难以实现跨域,因此考虑改变浏览器设置消除同源策略,以下是网上看到的方法,亲测可用。

由于浏览器通过XHR对象实现Ajax通信一般受到同源策略限制,因此在Chrome中访问线上接口时会遇到跨域限制,一种简单的解决方式是通过命令行方式打开Chrome浏览器,设置不开启跨域限制:
通过win+R打开窗口并输入cmd打开命令行窗口,输入如下命令:

    "C:UsersUserNameAppDataLocalGoogleChromeApplicationchrome.exe" --disable-web-security --user-data-dir

chrome地址可以通过右键Chrome图标-->属性找到,切记使用该命令前关闭Chrome浏览器。

针对不同操作系统的不同命令方式:

    // mac  chrome 浏览器
    open -a "Google Chrome" --args --disable-web-security  --user-data-dir
    // mac  safari 浏览器 
    open -a "/Applications/Safari.app" --args --disable-web-security --user-data-dir 
    //linux
    chromium-browser --disable-web-security  

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

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

相关文章

  • 重学前端学习笔记(四)--div和span不是够用吗?

    摘要:笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏,每天分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入的专栏学习原文有的语音,如有侵权请联系我,邮箱。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以...

    lx1036 评论0 收藏0
  • 重学前端学习笔记(四)--div和span不是够用吗?

    摘要:笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏,每天分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入的专栏学习原文有的语音,如有侵权请联系我,邮箱。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以...

    ctriptech 评论0 收藏0
  • 重学前端学习笔记(四)--div和span不是够用吗?

    摘要:笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏,每天分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入的专栏学习原文有的语音,如有侵权请联系我,邮箱。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以...

    KnewOne 评论0 收藏0
  • 前端识点整理

    摘要:难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和,初中级前端就业形势不容乐观。整个系列的文章大概有篇左右,从我是如何成为一个前端工程师,到各种前端框架的知识。 为什么 call 比 apply 快? 这是一个非常有意思的问题。 作者会在参数为3个(包含3)以内时,优先使用 call 方法进行事件的处理。而当参数过多(多余3个)时,才考虑使用 apply 方法。 这个的原因...

    Lowky 评论0 收藏0

发表评论

0条评论

alanoddsoff

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<