vue中axios跨域问题

main.js配置
import axios from ‘axios‘
axios.defaults.baseURL = ‘http://www.zhizous.cn:81/test‘;//请求的域名
// axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded; charset=UTF-8‘;这样设置那就错啦[需要使用request拦截器]

/**http request 拦截器**/
axios.interceptors.request.use(
    req => {
        // const token =
        req.headers = {
            ‘Content-Type‘: ‘application/x-www-form-urlencoded;‘
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);
/**http response 拦截器**/
axios.interceptors.response.use(
    res => {
        if(res.data.errCode == 2){
            //做一些错误处理,如跳转到登录页等
        }
        return res;
    },
    err => {
        return Promise.reject(err.response.data);
    }
);

原文地址:https://www.cnblogs.com/zhizou/p/11610745.html

时间: 2024-08-29 22:16:13

vue中axios跨域问题的相关文章

Vue之Axios跨域问题解决方案

// axios 中的GET请求 axios.get('/user', { params: { ID: '001' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // axios 中的POST请求 axios.post('/user', { firstName: '1', lastName: '2' }) .then(func

vue 解决axios 跨域问题

闲着没事,假期敲vue 请求数据,总结下vue跨越问题 第一种.服务器服务器不支持跨域请求   1.当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分. 添加下面的代码: proxyTable: { '/api': { target: 'http://api.douban.com/v2', changeOrigin: true, pathRewrite: { '^/api': '' } } }, 将target设置为我们需要访问的域名. 2.然后在m

nuxt中-axios跨域- 服务器端渲染

今天在做项目中,遇到一个问题,在一个点击事件中利用axios发请求,出现了跨域问题,之前都是直接用的服务器端渲染,然后就一直没出现,还是解决了很久的,所以决定把问题及解决方案记录下来. tree.vue : 最终解决方案 在nuxt项目中的server文件中的index.js中拦截一个地址替我们发这个请求, server/index.js或者vue中的server.js 此时就需要在我们的点击事件中请求我在server的index.js的地址,及   /api/user/login 页面地址:t

vue中解决跨域问题

方法1.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 方法2.使用JQuery提供的jsonp methods: { getData () { var self = this $.ajax({ url: 'http://f.apiplus.cn/bj11x5.json', type: 'GET', data

vue中的跨域

proxyTable: { '/zabbix_api': { target: 'http://10.88.22.8',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/zabbix_api/': '/zabbix_api/', } }, '/passwd': { target: 'http://10.88.22.8',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathR

axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数

1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts 页面引入 import ECharts from 'vue-echarts' import ECharts from 'vue-echarts' import 'echarts/lib/chart/line' // 折线图 import "echarts/lib/component/title&q

解决vue axios跨域请求发送两次问题

问题: vue axios跨域请求,在Request Headers加Authorization传递Token时,发现统一请求触发了两次,第一次是Request Method: OPTIONS请求. 原因: 跨域请求时,浏览器会首先使用OPTIONS方法发起一个预请求,判断接口是否能够正常通讯.如果通讯异常,则不会发送真正的请求,如果测试通讯正常,则开始真正的请求. 解决方法: 后台:判断请求方式是OPTIONS,则不处理: 预请求 发送真正请求  PHP解决方法 class Common ex

聊聊 Vue 中 axios 的封装

聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一个优秀的 HTTP 库,axios 打败了曾经由 Vue 官方团队维护的 vue-resource,获得了 Vue 作者尤小右的大力推荐,成为了 Vue 项目中 HTTP 库的最佳选择. 虽然,axios 是个优秀的 HTTP 库,但是,直接在项目中使用并不是那

ASP.NET中Cookie跨域的问题及解决代码

ASP.NET中Cookie跨域的问题及解决代码 http://www.liyumei.net.cn/post/share18.html Cookies揭秘  http://www.cnblogs.com/zhangziqiu/archive/2009/08/06/cookies-javascript-aspnet.html 最近在项目开发中遇到一个很棘手的问题,一个用户在顶级域名登录后,跳转到自己所拥有的二级域名下管理二级网站时,cookie丢失了,一直找解决办法找了整整两天,百度谷歌一大堆,