调试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:\Users\UserName\AppData\Local\Google\Chrome\Application\chrome.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  

zhangding
358 声望23 粉丝

JavaScript+React+Redux


« 上一篇
React事件