【Vue|跨域问题(has been blocked by CORS policy:Response……)原因及解决办法】参考:https://www.cnblogs.com/wyw0905/p/14990707.html前端报错
文章图片
has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.什么是CORS CORS全称是跨域资源共享(Cross-Origin Resource Sharing)是一种AJAX跨域请求资源的方式
解决办法 一、vue 开发阶段解决跨域问题
开发阶段:vue.config.js中
module.exports = {
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { // 配置跨域
'/api':{
target:`http://www.baidu.com`, //请求后台接口
changeOrigin:true, // 允许跨域
pathRewrite:{
'^/api' : '' // 重写请求
}
}
},
}
二、JSONP解决办法
Jsonp(JSON with Padding) json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
="text/javascript">
/**
* 实现jsonp
* 1.创建script的标签
* 2.拼接 url
* 3.赋值url
* 4.放入头部
*/
function text_jsonp(req){
var script = document.createElement('script');
var url = req.url + '?callback=' + req.callback.name;
script.src = https://www.it610.com/article/url;
document.getElementsByTagName('head')[0].appendChild(script);
}
三、CORS(跨域资源共享)
CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上。在CORS请求,头部信息中包含以下三个字段:
- Access-Control-Allow-Origin:该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求;
- Access-Control-Allow-Credentials:可选,值为布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true。
如果要发送Cookie,Access-Control-Allow-Origin必须为指定明确的、与请求网页一致的域名
; - Access-Control-Expose-Headers:可选。CORS请求时
XMLHttpRequest
对象的getResponseHeader()
方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma
。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。
四、iframe实现跨域
文章图片
iframe(src){
//数组
if(Array.isArray(src)){
this.docs.visible = true;
}else{
this.docs.visible = false;
}
this.link= src
if(this.docs.visible == false){
if(this.$refs['ruleIframe'] && this.$refs['ruleIframe'].querySelector('iframe')){
this.$refs['ruleIframe'].querySelector('iframe').remove()//删除自身
}
var iframe = document.createElement('iframe');
iframe.width = '100%';
iframe.height = '100%';
iframe.setAttribute('frameborder','0')
iframe.src = https://www.it610.com/article/src;
this.append(iframe)
}},
//创建元素 防止获取不到 ruleIframe 递归
append(iframe){
if(this.$refs['ruleIframe']){
this.$refs['ruleIframe'].appendChild(iframe);
return
}
setTimeout(()=>{
this.append(iframe);
},500)
}
推荐阅读
- java|SpringCloud+MySQL+Vue实现人脸识别智能考勤管理系统
- 数据传输POST心法分享,做前端的你还解决不了这个bug()
- Vue|Vue中 V指令
- vue2.x技术分享|vue中常用的一些指令
- Vue.js|vue.js中常用v-指令
- vue.js|vue中常见的v指令
- js|js重点知识总结
- 前端|HTML+CSS入门
- 前端|一份优秀的前端开发工程师简历是怎样的()