常见的跨域问题以及解决方案
身为一个码农,在日常的开发过程中难免遇到API接口跨域的问题,今天主要整理一下导致跨域问题的原因以及常用的解决方案。
导致跨域问题的原因?
跨域问题其实是由浏览器的同源策略导致的。
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
常用的解决方案
解决跨域问题的方式有很多,一般有下面几种:
1、 Cross-Origin Resource Sharing(CORS)跨域资源
2、JSONP
3、反向代理
4、document.domain
5、使用postMessage
6、WebSocket
7、关闭浏览器跨域限制(disable-web-security)
然而,在实际的开发过程中我们一般最常用的解决方案是CORS和反向代理。
跨域资源共享(CORS)
跨域资源共享(Cross-Origin Resource Sharing,简称 CORS),是 HTML5 提供的标准跨域解决方案。相较于JSONP的方式,CORS具有更多优势:
JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
不过使用CORS来解决跨域问题需要服务端支持,然后通过设置Access-Control-Allow-Origin来解决跨域问题。
服务端如何实现CORS跨域资源共享?
我们以node
服务为例,因为我个人比较喜欢使用koa2来进行Restful API的开发, 所以我们可以通过koa2-cors
来快速实现服务对CORS
的支持,具体实现示例代码:
var koa = require('koa');
var app = new koa();
var router = require('koa-router')();
//引入koa2-cors库
const cors = require('koa2-cors');app.use(cors({origin: function (ctx) {return "*"; // 允许来自所有域名请求},exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],maxAge: 5,credentials: true,allowMethods: ['GET', 'POST', 'DELETE'],allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))router.post('/', async function (ctx) {ctx.body = 'hello,world'
});app.use(router.routes()).use(router.allowedMethods());app.listen(3000);
反向代理
除了使用CORS
之外,我们也会经常通过设置反向代理服务来解决跨域问题。
一般情况下,我们可以直接通过配置nginx
服务器来实现反向代理功能;
因为我们公司后端是采用了微服务架构+网关(kong),所以可以直接在kong
里面配置路由规则;
如果自己是前端开发者并且使用了vue
进行前端项目开发,我们只可以打开项目中config文件夹下index.js文件,然后在dev.proxyTable
添加配置信息就可以了。示例:
var path = require('path')module.exports = {build: {env: require('./prod.env'),index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/',productionSourceMap: true,// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: false,productionGzipExtensions: ['js', 'css'],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report},dev: {env: require('./dev.env'),port: 8087,autoOpenBrowser: true,assetsSubDirectory: 'static',assetsPublicPath: '/',//################################################################配置信息proxyTable: {'/api': {target: 'http://13.63.***.**',//填写需要代理的真实地址changeOrigin: true,pathRewrite: {'^/api': ''}}},//################################################################配置信息// CSS Sourcemaps off by default because relative paths are "buggy"// with this option, according to the CSS-Loader README// (https://github.com/webpack/css-loader#sourcemaps)// In our experience, they generally work as expected,// just be aware of this issue when enabling this option.cssSourceMap: false}
}
补充
如果我们希望可以最快速的解决跨域问题,然后进行临时调试,我们可以直接通过关闭chrome的安全设置(不推荐)。
具体实现方式
1、在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏
2、在属性页面中的目标输入框里加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData
,user-data-dir
可以是任意路径,如下图所示:
3、保存并重启浏览器
常见的跨域问题以及解决方案相关推荐
- JSON Web Token(缩写 JWT) 目前最流行、最常见的跨域认证解决方案,前端后端都需要会使用的东西
JSON Web Token(缩写 JWT)是目前最流行,也是最常见的跨域认证解决方案.无论是咱们后端小伙伴,还是前端小伙伴对都是需要了解. 本文介绍它的原理.使用场景.用法. 关于封面:这个冬天你过 ...
- 常见js跨域解决方案
以下为几种常见js跨域解决方案: ajax跨域请求 一.使用jsonp方式实现跨域请求 $.ajax({async: false, type:"POST",dataType: 'j ...
- 前端常见的跨域解决方案
一.什么是跨域 跨域也称为非同源策略请求,就是去非同源地址获取数据的行为 只要页面,向非同源地址,发出了ajax / fetch请求,此时就出现了跨域问题. 专业的解释是,两个不同源的服务去访问对方的 ...
- Web学习之跨域问题及解决方案
Web学习之跨域问题及解决方案 javascript/jquery 浏览数:161 2017-5-8 在做前端开发时,我们时常使用ajax与服务器通信获取资源,享受ajax便利的同时,也知道它有限制: ...
- 也谈跨域数据交互解决方案
也谈跨域数据交互解决方案 先来句题外话,最开始Ajax应该是用来特指用XMLHttpRequest传输数据这门技术,但就像最近大家把一切web新技术都归到html5名下一样,现在一切异步获取数据的手段 ...
- Web 学习之跨域问题及解决方案
2019独角兽企业重金招聘Python工程师标准>>> 在做前端开发时,我们时常使用ajax与服务器通信获取资源,享受ajax便利的同时,也知道它有限制:跨域安全限制,即同源策略. ...
- ajax跨域原理以及解决方案
ajax跨域原理以及解决方案 参考文章: (1)ajax跨域原理以及解决方案 (2)https://www.cnblogs.com/bojuetech/p/5895767.html (3)https: ...
- c#关于JWT跨域身份验证解决方案
c#关于JWT跨域身份验证解决方案 参考文章: (1)c#关于JWT跨域身份验证解决方案 (2)https://www.cnblogs.com/dengbo/p/11672495.html 备忘一下.
- 到底什么是跨域?附解决方案
转载自 到底什么是跨域?附解决方案 什么是跨域 要了解跨域,先要说说同源策略. 同源策略是由 Netscape 公司提出的一个著名的安全策略,所有支持 JavaScript 的浏览器都会使用这个策略. ...
最新文章
- React使用ES6语法重构组件代码
- plotly可视化绘制混合图
- uni中动态加载class_SpringBoot中使用LoadTimeWeaving技术实现AOP功能
- 原本挂起的线程继续执行
- C++面试常见问题整理汇总(面试者必看哦!)
- 下周开幕!给深圳的嵌入式和电子工程师准备的嘉年华来了
- fastai学习——第一个bug
- springboot 优雅关闭_Springboot 优雅停止服务的几种方法
- linux一些杂项整理
- URL报错: unknown protocol
- navicat mysql server has gone away_Navicat中MySQL server has gone away错误怎么办【转载】
- linux 查看运行平台,linux查看程序运行相关命令
- 随机森林模型预测和交叉验证
- javaweb调用第三方短信接口
- Python量化资源大合集
- 机器学习模型太慢?来看看英特尔(R) 扩展加速 ⛵
- 一文带你了解隐私 Layer1
- python fun函数输入某年某月_Python编程实现输入某年某月某日计算出这一天是该年第几天的方法...
- IMEI、IMSI、ICCID、SN是什么?意义和区别?通信模组或手机的唯一识别码
- iOS程序的Build过程