码迷,mamicode.com
首页 > 其他好文 > 详细

vue解决跨域问题的方式(个人技术博客)

时间:2020-11-12 13:33:18      阅读:8      评论:0      收藏:0      [点我收藏+]

标签:博客   cli   技术   总结   cat   遇到的问题   技术博客   rewrite   from   

一、技术概述

现在项目都是前后端分离开发,在发送请求时有可能会出现跨域问题。跨域问题的产生原因很多,可能是域名不同,或者是域名相同但是接口不同等。最好的解决方法就是后端更改header,但是有的时候这样的方法还是会出现跨域问题,这时候就可以通过vue-cli中的配置来解决跨域问题。

二、技术详述

使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)
打开config/index.js,在proxyTable中添写如下代码:

      ‘/api‘: {
        target:‘http://129.204.247.165/‘,
        changeOrigin:true,
        pathRewrite:{
          ‘^/api‘: ‘‘
        }
      }
    },

main.js里面加入:

import axios from ‘axios‘
Vue.prototype.$axios = axios

使用axios:

method: ‘post‘,
       url: ‘/api/posts/gethotbystatus‘,
       data:qs.stringify({
         day:20,
         status:0
       }),
       headers: {
         ‘Content-Type‘: ‘application/x-www-form-urlencoded‘
       },
     }).then(function (res) {}

三、可能遇到的问题和解决方式

主要的问题就是不用vue-cli脚手架只单单导入vue.js包不能解决跨域.所以解决的过程就是安装vue-cli脚手架

四、总结

以后如果后端修改了header还不能解决跨域问题,用vue来解决就是一个很好的方法

五、参考文献

Vue中跨域问题解决

vue解决跨域问题的方式(个人技术博客)

标签:博客   cli   技术   总结   cat   遇到的问题   技术博客   rewrite   from   

原文地址:https://www.cnblogs.com/hsx479/p/13781762.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!