当前位置:首页 > 前端 > 正文内容

Chrome浏览器开启Ajax跨域访问调试

放牧的风5年前 (2018-11-22)前端941

由于浏览器安全性限制,Ajax是不能跨域访问的,而我们在日常开发工作中,经常会出现本地开发环境需要访问其他服务器上的API情况。提示信息为:

1010568-20181122152615358-1673523623.png

Access to XMLHttpRequest at 'http://****' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在当今前后端分里模式开发越来越多,使用Ajax进行数据交互时常有跨越发生。

本文说明如何让Chrome浏览器支持开发时的Ajax跨域访问。

1.升级Chrome到最新版本

参考下面经验"如何离线安装Chrome最新版本或某一特定版本?",将Chrome升级到最新版本。

如何离线安装Chrome最新版本或某一特定版本?

2.创建一个调试用的Chrome快捷方式

右键选择Chrome快捷方式,在弹出的右键菜单中选择"创建快捷方式",重命名新建的快捷方式为Chrome-Debug

1010568-20181122152702135-1208699153.png

1010568-20181122152723506-84285758.png

3.打开Chrome-Debug快捷方式属性

右键选择Chrome-Debug快捷方式,右键菜单中选择"属性",打开Chrome-Debug快捷方式属性设置对话框。

1010568-20181122152757810-2129309466.png

4.增加启动参数

在目标后面增加如下的启动参数:--user-data-dir="c:\ChromeDebug" --test-type --disable-web-security ,点"确定"按钮保存设置。完整的目标内容如下所示:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="c:\ChromeDebug" --test-type --disable-web-security

注:

  • 每个--前面都有一个空格。

  • disable-web-security需要搭配user-data-dir参数一起设置。

5.打开Chrome-Debug

因为启动参数中增加了--user-data-dir="c:\ChromeDebug",表示Chrome会从c:\ChromeDebug中存取用户数据,因该目录可能为空,所以新打开的Chrome-Debug窗口是一个全新的Chrome,没有书签、历史、扩展程序等内容,需要再重新安装扩展程序。

1010568-20181122152859544-2026902935.png

6.调试跨域访问

再次打开之前出错的程序,就可以发现Ajax已经可以正常跨域访问了。

 

参考自百度经验


扫描二维码推送至手机访问。

版权声明:本文由放牧的风发布,如需转载请注明出处。

本文链接:https://grazingwind.com/post/25.html

分享给朋友:

相关文章

用webstorm在chrome 调试页面时一直弹出 copy authorization url to clipboard

用webstorm在chrome 调试页面时一直弹出 copy authorization url to clipboard

用chrome来调试页面,每次刷新会弹出 requested without authorization,是因为更新后的bug,可以在Setting - debugger中设置 ...

NPM install -save 和 -save-dev 傻傻分不清

NPM install -save 和 -save-dev 傻傻分不清

回顾 npm install 命令我们在使用 npm install 安装模块的模块的时候 ,一般会使用下面这几种命令形式:npm install moduleName # 安装模块到项目目录下 &...

npm更新模块并同步到package.json中

npm更新模块并同步到package.json中

使用原始npm1.查看需要更新的版本npm outdated该命令会列出所有需要更新的项目2.修改package.json中需要更新的包对应的版本号npm update由于npm update只能按照package.js...

webstorm中用npm运行任务(即显示npm面板)

webstorm中用npm运行任务(即显示npm面板)

第一步右击package.json文件,点击show npm Scripts第二步出现npm面板第三步点击即可运行任务  ...

JavaScript for...of与for...in的区别

JavaScript for...of与for...in的区别

无论是for…in还是for…of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。for…in 语句以原始插入顺序迭代对象的可枚举属性。for…of 语句遍历可迭代对象定义要迭代的数据。以下示例显示了与Array一起使用时,fo...

如何理解HTTP响应的状态码?

如何理解HTTP响应的状态码?

我们知道HTTP协议是通过HTTP请求和HTTP响应来实现双向通信的。 HTTP状态码(HTTP Status Code)是用以表示Web服务器HTTP响应状态的3位数字代码,由RFC 2616规范定义。 合理的状态码不仅可以让用...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。