精华内容
下载资源
问答
  • 主要介绍了Vue axios 跨域请求无法带上cookie的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • axios默认是没有jsonp 跨域请求的方法的。一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息。 例如java中的 header,response.setHeader("Access-Control-Allow-Origin", ...
  • 我们在vue开发中用axios进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢? 这是因为CORS跨域分为 简单...
  • vue axios跨域请求

    2020-06-07 16:37:33
    vue axios跨域请求 在写项目时候运用axios可以合理的解决跨域请求的问题 //先引入axios import axios from 'axios' //配置请求的跟路径 跨域地址 axios.defaults.baseURL = "http://192.168.11.102:8888/" //将$http...

    vue axios跨域请求

    在写项目时候运用axios可以合理的解决跨域请求的问题

    //先引入axios
    import axios from 'axios'
    //配置请求的跟路径                  跨域地址
    axios.defaults.baseURL = "http://192.168.11.102:8888/"
    //将$http放到Vue的原型中 方便后面的使用
    Vue.prototype.$http = axios
    
     this.$refs[formName].validate(async valid => {
              if (valid) {
                 //通过配置后发送跨域请求                 请求的方式    传入的data为一个对象
                const {data : res} = await this.$http.post('login',{user : this.ruleForm.user,pass : this.ruleForm.pass})
                console.log(res)
              } else {
                console.log('error submit!!');
                return false;
              }
    });
    

    需要注意到是接收的返回值是一个promise对象,所以需要运用 async 和 await

    ~~~~~~~~ end ~~~~~~~~~

    展开全文
  • 本篇文章主要介绍了VUE axios发送跨域请求需要注意的问题,在实际项目中前端使用到vue,后端使用php进行开发。前端使用axios请求请求遇到的问题,有兴趣的可以了解一下
  • Vue axios跨域请求

    2020-04-23 16:57:35
    1.安装axios. npm install axios 2.在config目录下的index.js设置proxyTable: proxyTable: { '/api':{ target: "http://localhost:9000", changeOrigin: true, pathRewrite:{ ...

    1.安装axios.

    	npm install axios
    

    2.在config目录下的index.js设置proxyTable:

        proxyTable: {
          '/api':{
            target: "http://localhost:9000",
            changeOrigin: true,
            pathRewrite:{
              '^/api': ''
            }
          }
        }
    

    3.在main.js引入axios模块:

    import axios from 'axios'
    
    Vue.prototype.$axios = axios
    axios.defaults.baseURL = '/api'
    Vue.config.productionTip = false
    

    4.在App.vue添加测试方法:

     methods: {
      created: function () {
        this.testAxios1()
      },
      methods: {
        testAxios1: function () {
          console.log(this.$axios.defaults.baseURL)
          this.$axios({
            method: 'get',
            url: '/data.json'
          })
            .then(function (response) {
              console.log(response)
            })
            .catch(function (error) {
              console.log(error)
            })
        }
      }
    

    6.本例中使用Tomcat8.5开启一个本地web服务器,然后在webapps添加data.json文件,文件内容为:

    {
    	"data":[	
    	]
    }
    

    7.重新运行:npm run dev.
    得到以下结果:
    输出
    浏览器中看到的http://localhost:8083/api/data.json,并非实际访问地址,这是因为设置代理,具体路径index.js中的proxyTable中的target+this.$aixos访问的url。

    展开全文
  • 错误信息: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-...随着前端框架的发展,如今前后端数据分离已经成了趋势,也就是说,前端只需要用ajax请求后端的数据合
  • Vuecli3 axios跨域请求解决方案 前端页面的地址 http://localhost:8080/ 后端接口地址 http://localhost:3005/ 百度到的解决方案(几乎都是这样配置的): 1、在main.js添加一下代码 import axios from 'axios'...

    前端页面的地址

    http://localhost:8080/
    

    后端接口地址

    http://localhost:3005/     
    

    百度到的解决方案(几乎都是这样配置的):
    1、在main.js添加一下代码

    import axios from 'axios'
    Vue.prototype.$axios = axios
    axios.defaults.baseURL = '/api'
    

    2、对vue项目根目录下的vue.config.js进行如下配置

    module.exports = {
      devServer: {
         host: 'localhost',
         port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {  //配置跨域
          '/api': {
            target: 'http://localhost:3005',  //这里后台的地址模拟的;应该填写你们真实的后台接口
            ws: false,
            changOrigin: true,  //允许跨域
            pathRewrite: {
              '^/api': ''  //请求的时候使用这个api就可以
            }
          }
        }
      }
    }
    

    3、发起请求

    this.$axios
          .get("/")
          .then(res => {
            console.log(res.data);
            this.tableData = res.data;
          })
          .catch(error => {
            console.log(error);
          });
    

    但是我自己进行如下配置报了错误

    Proxy error: Could not proxy request / from localhost:8080 to localhost:5000.
    See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ENOTFOUND).
    

    在这里插入图片描述

    后来试了下注释掉host和port就可以正常跨域了

    module.exports = {
      devServer: {
        /*  
            注释掉下面两行
        */
        // host: 'localhost',
        // port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {  //配置跨域
          '/api': {
            target: 'http://localhost:3005',  //这里后台的地址模拟的;应该填写你们真实的后台接口
            ws: false,
            changOrigin: true,  //允许跨域
            pathRewrite: {
              '^/api': ''  //请求的时候使用这个api就可以
            }
          }
        }
      }
    }
    

    然后就能正常的获取数据了
    在这里插入图片描述
    小白一枚,也搞不太懂这是为啥,希望有大牛解释一下,也避免遇到同样情况的兄弟也和我一样踩坑

    展开全文
  • vueaxios跨域请求

    万次阅读 2019-06-22 13:22:31
    vueaxios跨域请求 1.axios 是 第三方库 使用方法: 使用 npm: $ npm install axios 使用 bower: $ bower install axios 使用 cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></...

    vue中axios跨域请求

    1.axios 是 第三方库
    使用方法:

    • 使用 npm:
        $ npm install axios
    
    • 使用 bower:
    $ bower install axios
    
    • 使用 cdn:
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    axios get 请求示例

    HTML代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="getData">get-mock-data</button>
            <button @click="get_api_data"> get-api-data </button>
        </div>
        
    </body>
    </html>
    

    js代码

    <script>
              console.log( axios )
            // 当我们引入axios cdn后会全局暴露出一个axios对象
            new Vue ({
                el:"#app",
                methods:{
                    
                      getData(){
                        // var p = axios({
                        //     url:'./data/name.json'
                        // });
                        // console.log(p);//axios是一个promise对象
    
                        axios({
                            url:"./data/name.json",
                            method:'get',//method默认是get请求
                        }).then(function(res){
                            console.log(res)
                            // axios会对我们请求来的结果进行再一次的封装( 让安全性提高 )
                        }).catch(err=>{
                            console.log(err)
                        })
    
                    },
    

    请求结果 : axios会对我们请求来的结果进行再一次的封装( 让安全性提高 )
    在这里插入图片描述

     //get在线跨域请求
                   get_api_data(){
                      axios({
                          url:'https://请求地址',//在线跨域请求
                          method:"GET",//默认是get请求
                          headers:{//设置请求头
                              'X-Client-Info':' {"a":"3000","ch":"1002","v":"5.0.4","e":"15611234619393093477584"}',
                              'X-Host': 'mall.film-ticket.film.list',
                          },
                          params:{//?search后面的值写在params中
                              cityId: 330100,
                              pageNum: 1,
                              pageSize: 10,
                              type: 1,
                              k: 3969168,
                          }
                      }).then(function(val){
                          console.log(val) // axios会对我们请求来的结果进行再一次的封装( 让安全性提高 )
                      }).catch(function(err){
                          console.log(err)
                      })
                  },
              }
          })
      </script>
    

    get跨域请求中params:中的值对应hearders中Query String Parameters
    在这里插入图片描述
    在这里插入图片描述
    get方法总结:

    A: 无参数
            axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error))
     B: 有参数
            axios({
                url: 'http://xxx',
                method: 'get' //默认就是get,这个可以省略,
                params: {
                    key: value
                }
            })
    

    axios post 请求示例

    html代码
     <button  @click="postData"> post-data </button>
     
     js代码
           postData(){
                        let params = new URLSearchParams()//得到params对象,用来接收请求参数
                        // params.append( key, value )  key是参数名,value是参数值
                        //传递参数值
                         params.append( 'a', 2 )
                         params.append( 'b', 2 )
    
                        axios({
                            url:'http//localhost/php',
                            method:'post',
                            headers:{//请求头设置为表单提交的请求头
                                'Content-Type':"application/x-www-form-urlencoded"
                            },
                            data:params,
                        }).then( function (val) {
                            console.log(res)
                        }).catch( function (error) { 
                            console.log(error)
                        })
                    }
                }
                官方文档中axios post请求案例有点问题,请求会出现跨域问题;
    			以上示例为解决官方文档存在问题的写法;
    

    post方法总结

    //对于post请求可以统一设置一个请求头,后面所有post请求就可以不用单独设置请求头了
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    
     // 具体语法
     let params = new URLSearchParams()//得到params对象,用来接收请求参数
    
    // params.append(key,value) //请求参数写成键值对key就是参数名,value就是参数值
    
    params.append('a',1)
    params.append('b',2)
    
    axios({
        url: 'http://localhost/post.php',
        method: 'post',
        data: params,//将请求参数写入data;
          headers: {  //单个请求设置请求头
           'Content-Type': "application/x-www-form-urlencoded"
        }
    })
    .then(res => {
        console.log( res )
    })
    .catch( error => {
        if( error ){
        throw error
    }
    })
    
    展开全文
  • 解决vue axios跨域请求2次问题

    千次阅读 2019-08-12 17:29:04
    在发起复杂请求跨域的情况下会自动发起OPTIONS预检测请求 简单请求需满足以下两个条件否则为复杂请求 请求方法是以下三种方法之一: HEAD、GET、POST HTTP 的头信息不超出以下几种字段: Accept、Accept-Language...
  • vue使用axios跨域请求

    2021-09-21 00:35:42
    axios跨域请求的时候默认会自带服务器地址,想要跨域就不能自带这个地址,,而请求别的地址 created(){ //设置axios 跨域 地址 Vue.prototype.$http =axios; axios.defaults.baseURL="http://localhost:8080" }...
  • .Axios.get('/api/resource_overview' ,{ 2 params: { 3 vcenter_num:'vcenter1' 4 } 5 }).then( function (res) { 6 console.log(res); 7 }). catch ( function (err) { 8 console.log(err...
  • 今天小编就为大家分享一篇vue项目使用axios发送请求让ajax请求头部携带cookie的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 对于网络请求,由于在每一次请求时都需要判断各种异常情况,然后提示用户,例如请求是否成功、失败的原因等,考虑到这些判断基本上都使用重复的代码,因此可以将网络请求封装,做成Vue的插件方便使用。由于封装的...
  • axios默认不携带cookie,因此在发送请求时添加参数{withCredentials: true} 如 //post this.$http.post( url, data,//数据 {withCredentials: true}//post是第三个参数 ).then((res)=>{ ... }); //get ...
  • 2、而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the ‘Access-Control-Allow-Origin’ headerin the ...
  • vueaxios跨域请求解决

    千次阅读 2018-10-23 17:03:19
    一,首先在文件中下载axios cnpm install axios --save-dev 二、在main.js中引入及获取对象 import Vue from 'vue' import App from './App' import router from './router' ...Vue.prototype.$axios = Axios...
  • Vue-axios跨域请求

    万次阅读 2018-03-12 22:47:31
    在构建web项目的时候,我们难免会采用... 在vue项目中我们通常使用Axios来进行数据请求Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,而vue所构建的项目也算基于npm来构建,因此让我们先来安
  • 1. vue.config.js的配置 module.exports = { publicPath: './', devServer: { // axios 跨域代理 proxy: { '/api': { target: 'http://192.168.10.129:5000', changeOrigin: true } }
  • vue axios 跨域访问配置

    千次阅读 2018-12-21 17:16:06
    // 表示跨域请求时是否需要使用凭证 // http request 拦截器 // 在ajax发送之前拦截 比如对所有请求统一添加header token axios.interceptors.request.use( config => { /* if (token) { config.headers....
  • Vue-axios跨域post请求

    2020-10-13 17:10:09
    今天被axios跨域请求烧脑了,爬了很多文章终于能正常ajax了,在此记录一下方法. 一:安装 axios和qs 在项目目录中安装这两个插件 npm i axios npm i qs 解释一下为啥要安装qs,我用的后端是原生的php. 通过axios发送的...
  • Vue axios跨域配置proxyTable404错误

    千次阅读 2019-10-08 23:57:24
    配置的config/index.js proxyTable: { '/apia':{ target:'https://api.caiyunapp.com',//目标接口域名 changeOrigin: true,//是否跨域 pathRewrite:{ '^/apia': ''//重写接口,后面可以使重写的新路径,一...
  • vue axios跨域请求tp5项目 困扰了一天的tp5 跨域请求终于搞定了,记录一下 在vue axios请求中会发送两次请求,提一次是监听当前请求是否能走通,网上很多教程文档都能实现,但是两次都请求到了数据,这样比较消耗...
  • 今天小编就为大家分享一篇基于axios 解决跨域cookie丢失的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue axios跨域请求解决

    2019-12-17 22:00:17
    vue axios跨域请求解决 1、修改vue项目下的config目录下的index.js index.js proxyTable: { "/api": { target: "http://192.168.0.111:8888/", //这里是修改你要访问的后台服务器的ip+端口 changeOrigin: true, ...
  • VS code 配置 Vue axios 跨域请求

    千次阅读 2019-11-12 09:21:15
    VS code 配置 Vue axios 跨域请求 第一步: config/index.js //跨域配置 proxyTable: { ‘/api’: { target: ‘http://ip:端口’, // 后台访问地址 接口的域名 // secure: false, // 如果是https接口,需要...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,068
精华内容 5,227
关键字:

vueaxios跨域请求

vue 订阅