最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

Vue项目中跨域问题解决方案

来源:动视网 责编:小采 时间:2020-11-27 22:13:18
文档

Vue项目中跨域问题解决方案

Vue项目中跨域问题解决方案:方法 后台更改header 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) Jquery jsonp 后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allo
推荐度:
导读Vue项目中跨域问题解决方案:方法 后台更改header 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) Jquery jsonp 后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allo


方法

  • 后台更改header
  • 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)
  • Jquery jsonp
  • 后台更改header

    header('Access-Control-Allow-Origin:*');//允许所有来源访问 
    header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

    使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)

    打开config/index.js,在proxyTable中添写如下代码:

    proxyTable: { 
     '/api': { 
     target: '填写请求源地址', //源地址 
     changeOrigin: true, //是否跨域
     pathRewrite: { 
     '^/api': '' //路径重写 
     } 
     } 
    }

    使用axios

     this.$axios.post("/api/地址",{
     发送的数据
     }).then(data=>{
     console.log(data);
     })

    axios的配置(main.js)

    axios.defaults.headers.post["Content-type"]="application/json";
    Vue.prototype.$axios=axios;

    使用ES6fetch请求

    fetch("/api/test/testToken.php",{
     method:"post",
     headers:{
     "Content-type":"application/json",
     },
     body:JSON.stringify({发送数据})
     }).then(result=>{
     return result.json()
     }).then(data=>{
     console.log(data);
     })

    使用jquery jsonp

    methods: { 
     getData () { 
     var self = this 
     $.ajax({ 
     url: '地址', 
     type: 'GET', 
     dataType: 'JSONP', 
     success: function (res) { 
     self.data = res.data.slice(0, 3)
     self.opencode = res.data[0].opencode.split(',') 
     } 
     }) 
     } 
    }

    总结

    以上所述是小编给大家介绍的Vue项目中跨域问题解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    文档

    Vue项目中跨域问题解决方案

    Vue项目中跨域问题解决方案:方法 后台更改header 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) Jquery jsonp 后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allo
    推荐度:
    标签: VUE 解决 解决方案
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top