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

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配置解决跨域问题的更多相关文章

  1. vue webpack配置解决跨域问题

    现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 ...

  2. vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址

    一.开发环境中跨域 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole.不同域名之间的访问 ...

  3. Webpack 开发服务器代理设置解决跨域问题

    在前端开发过程中,可能会遇到跨域问题,在 webpack 设置中对 devServer 配置代理即可解决跨域问题,具体设置如下: webpack.config.js module.exports = ...

  4. PhoneGap开发跨平台移动APP - 解决跨域资源共享

    解决跨域资源共享 一.WebApi解决跨域资源共享. 开发中选择WebApi来作为服务端的数据接口,由于使用PhoneGap,就需要通过js来获取远程远程数据服务器的数据,由于同源策略的限制,这就涉及 ...

  5. vue访问外部接口设置代理,解决跨域(vue-cli3.0)

    vue-cli3.0搭建的项目,平时访问内部接口配置了拦截器,今天需要调用天气预报的外部接口,发现跨域问题,通过配置代理解决. 1.在vue.config.js中配置代理 module.exports ...

  6. Vue 本地代理 纯前端技术解决跨域

    vue-axios获取数据很多小伙伴都会使用,但如果前后端分离且后台没设置跨域许可,那要怎样才能解决跨域问题? 常用方法有几种: 通过jsonp跨域 通过修改document.domain来跨子域 使 ...

  7. vue-webpack项目本地开发环境设置代理解决跨域问题

    前言: 一般跨域问题只要后端配置好的话,是不需要前端做处理的,但也不能保证你遇到的所有后端都能很好的处理这个问题,这个时候可能就需要前端设置代理解决这个问题了. 配置方法: 1. config/ind ...

  8. Vue项目中使用webpack配置了别名,引入的时候报错

    chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/as ...

  9. webpack代理解决跨域

    开了一个9000端口,又开了一个8881端口,在9000端口访问页面,数据接口是8881,这样就产生了跨域,如何解决? webpack中做如下配置: proxy: { '/api/*': { targ ...

随机推荐

  1. python学习笔记(23)-异常处理

    #异常处理与调试 #异常:在运行代码过程中遇到的任何错误,带有error字样的都是异常 #异常处理,对代码中所有可能出现的异常进行的处理 #1.处理某个错误 2,处理某个类型的错误 3 有错就抓 一. ...

  2. Node.js //TODO

    目录 技术背景 开发环境 学习过程 参考资料 结束语 技术背景 开发环境 学习过程 参考资料 结束语

  3. [LC] 80. Remove Duplicates from Sorted Array II

    Given a sorted array nums, remove the duplicates in-place such that duplicates appeared at most twic ...

  4. highcharys去掉x轴,y轴轴线和刻度

    x轴 xAxis: { lineWidth :,//去掉x轴线 tickWidth:,//去掉刻度 labels: { enabled: false },//去掉刻度数字 }, y轴 yAxis: { ...

  5. python3下scrapy爬虫(第一卷:安装问题)

    一般爬虫都是用urllib包,requests包 配合正则.beautifulsoup等包混合使用,达到爬虫效果,不过有框架谁还用原生啊,现在我们来谈谈SCRAPY框架爬虫, 现在python3的兼容 ...

  6. linux在线书籍

    <Linux就该这么学-刘遄>https://www.linuxprobe.com/

  7. 接口测试-chap6-获取页面动态token

    1.在发起某些请求时,可能会要求必须是从某个页面进行请求,此时会验证页面的token 2.这个token是动态生成的,每次请求时值都是不同的, 不可以通过fiddler抓取的值作为固定值传入,通过fi ...

  8. python 写个冒泡排序吧

    冒泡排序 介绍: 冒泡排序(Bubble Sort,台湾译为:泡沫排序或气泡排序)是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作 ...

  9. Apollo配置中心介绍与使用指南

    转载于https://github.com/ctripcorp/apollo,by Ctrip, Inc. Apollo配置中心介绍 Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中 ...

  10. 关于JS对象原型prototype与继承,ES6的class和extends · kesheng's personal blog

    传统方式:通过function关键字来定义一个对象类型 1234567891011 function People(name) { this.name = name}People.prototype. ...