vue中遇到跨域问题
昨天在vue开发项目中遇到一个坑,遇到了vue的跨域问题,通过多次度娘的查询,最终解决了这个问题,
具体情形如下:新的项目,需要vue的开发,在本地的开发中遇到跨域的问题!
vue中解决跨域问题的三种方法:
1.服务器端添加请求头header
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
2.使用jq的jsonp
methods: {
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(',')
}
})
}
}
注:需要引入jq,
首先需要下载依赖
npm install jquery --save-dev
在webpack.base.conf.js文件中加入
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
在需要的temple里引入也可以在main.js里全局引入
import $ from 'jquery'
3.使用服务器代理的方式(注项目使用vue-cli脚手架搭建)
首先下载依赖中间件http-proxy-middleware
$ npm install --save-dev http-proxy-middleware
然后打开config/index.js,在proxyTable中添写如下代码:
proxyTable: { '/': { target: 'http://192.168.2.18:8080', // 你请求的第三方接口 changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: { // 路径重写, '^/': '' // 替换target中的请求地址,也就是说以后你在请求http://jisuapi.com/XXXXX这个地址的时候直接写成/api即可。 } } },
在下载一个一个依赖qs的模块,解决post过程中不能识别data的问题
$ npm install --save-dev q
在api.js或者.vue中设置
//axios import axios from 'axios'; let base = window.location.protocol + "//" + window.location.host; let qs=require('qs'); axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; // 超时时间(请求超过时间,出现提示) axios.defaults.timeout = 5000; //设备详情信息 export const getEquipmentDetails = params => { return axios.post(`${base}/meis/a/smart/sysModel/ajaxGetDeviceDetaill`,qs.stringify( params)).then(res => res.data); };
在header.vue中调用
import { getEquipmentDetails } from '../api/api'; export default { data(){ return{ deviceId:"", deviceMark:"", deviceName:"", deviceSection:"", deviceCode:"" } }, methods:{ equipmentDetails(){ //加载设备详情 let deviceId = this.$utils.getUrlKey("deviceId"); let params = {id:deviceId}; getEquipmentDetails(params,{ headers:{ token:sessionStorage.getItem("token") } }).then(data=>{ // console.log(data); this.deviceName = data.name; this.deviceCode = data.code; this.deviceSection = data.section; this.deviceMark = data.name?data.name.substring(0,1):""; }) } }, watch: { '$route' (to, from) { let deviceId = this.$utils.getUrlKey("deviceId"); let params = {id:deviceId}; this.equipmentDetails(); } }, mounted(){ this.equipmentDetails(); } }
正常的调用就可以,注意一定要调用qs,否则post带参数的时候请求会报错500的错误!
注意:打包发布版本的时候将api.js的
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
设置为
axios.defaults.headers['Content-Type'] = 'application/json';