首页 > Web开发 > 详细

vue项目开发,用webpack配置解决跨域问题

时间:2018-05-28 19:15:51      阅读:227      评论:0      收藏:0      [点我收藏+]

今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理。

1,后端更改header

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

2,使用jsonp进行跨域

getData () { 
    var self = this 
    $.ajax({ 
      url: ‘http://f.apiplus.cn/bj11x5.json‘, 
      type: ‘GET‘, 
      dataType: ‘JSONP‘, 
      success: function (res) { 
        self.data = res.data.slice(0, 3) 
        self.opencode = res.data[0].opencode.split(‘,‘) 
      } 
    }) 
  } 

3,使用webpack反向代理(项目中使用vue-cli脚手架搭建)

1,在config/index.js中的proxyTable添加如下代码:

proxyTable: {
      ‘/gp‘: {
        target: ‘http://10.0.67.65/uat_branch/IspWeb/‘,
        changeOrigin: true,
        pathRewrite: {
          ‘^/gp‘: ‘‘
        }
      }
    },

在公共的apiConfig中加入跨域的环境:

case 5:
      //跨域环境
      apiObj.baseUrl = ‘/gp/‘;
      apiObj.File_upload_URL = ‘‘;
      break

至此所有的请求接口类似:http://localhost:8080/gp/api/v1.0/user/login

 尝试请求后发现该接口地址404,后发现:代理设置完成后需要重新 npm run dev

 

  

vue项目开发,用webpack配置解决跨域问题

原文:https://www.cnblogs.com/tangjiao/p/9101747.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!