精华内容
下载资源
问答
  • axios默认是没有jsonp 跨域请求的方法的。一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息。 例如java的 header,response.setHeader("Access-Control-Allow-Origin", ...
  • 主要介绍了Vue.js axios 跨域访问错误问题及解决方法,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 主要给大家介绍了关于Vue 3.x+axios跨域方案的踩坑指南,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue 3.x具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 主要介绍了Vue axios 跨域请求无法带上cookie的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue中axios跨域请求

    万次阅读 2019-06-22 13:22:31
    vue中axios跨域请求 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
    }
    })
    
    展开全文
  • VueAxios跨域问题解决方案

    万次阅读 多人点赞 2019-02-19 14:32:31
    背景:因为axios中只能使用get和post方法来进行请求数据,没有提供jsonp等方法进行跨域访问数据 axios中文网址:https://www.kancloud.cn/yunye/axios/234845 // axios 的GET请求 axios.get('/user', { ...

    背景:因为axios中只能使用get和post方法来进行请求数据,没有提供jsonp等方法进行跨域访问数据

              axios中文网址:https://www.kancloud.cn/yunye/axios/234845

    // 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(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    

    方案1:既然使用axios直接进行跨域访问不可行,我们就需要配置代理了。代理可以解决的原因:因为客户端请求服务端的数据是存在跨域问题的,而服务器和服务器之间可以相互请求数据,是没有跨域的概念(如果服务器没有设置禁止跨域的权限问题),也就是说,我们可以配置一个代理的服务器可以请求另一个服务器中的数据,然后把请求出来的数据返回到我们的代理服务器中,代理服务器再返回数据给我们的客户端,这样我们就可以实现跨域访问数据。

    准备工作:安装所需中间件和插件等,比如axios,http-proxy-middleware等。

    具体案例:这里以访问豆瓣Top250为例,直接访问如下:

    axios.get("http://api.douban.com/v2/movie/top250")
    .then(res=>{
    	console.log(res)
    })
    .catch(err=>{
    	console.log(err)
    })
    

    当执行npm run dev时,控制台报错如下:

    事实证明直接请求确实出现跨域问题了,下面具体演示解决跨域问题的步骤:

    上面所说的必备条件都已安装完成的情况下,执行以下步骤即可解决问题:

    1.配置BaseUrl

    在main.js中,配置数据所在服务器的前缀(即固定部分),代码如下:

    // 项目入口,配置全局vue
    import Vue from 'vue'
    import VueRouter from './router/routes.js'
    import Store from './store/index.js'
    
    import './assets/less/index.less'
    import App from './App.vue'
    
    
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-default/index.css'
    
    import axios from 'axios'
    Vue.prototype.$axios = axios
    axios.defaults.baseURL = '/api'  //关键代码
    Vue.config.productionTip = false
    
    
    Vue.use(ElementUI);
    
    new Vue({
    	router:VueRouter,
    	store:Store,
    	template:'<App/>',
    	components: {App}
    }).$mount('#app')
    
    // 默认进入商品模块
    // VueRouter.push({ path: '/home' })
    

    关键代码:axios.defaults.baseURL = '/api',作用是我们每次发送的请求都会带一个/api的前缀。

    2.配置代理

    在config文件夹下的index.js文件中的proxyTable字段中,作如下处理:

      dev: {
        env: require('./dev.env'),
        port: 8090,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          '/api': {
            target:'http://api.douban.com/v2', // 你请求的第三方接口
            changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
            pathRewrite:{  // 路径重写,
              '^/api': ''  // 替换target中的请求地址,也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
            }
          }
        },
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false
      }

    3.在具体使用axios的地方,修改url如下即可:

     axios.get("/movie/top250").then((res) => {
                      res = res.data
                      if (res.errno === ERR_OK) {
                         this.themeList=res.data;
                      }
                    }).catch((error) => {
                      console.warn(error)
                    })

    4.重新启动项目之后,已经解决了跨域问题,结果如下:

    原理:

    因为我们给url加上了前缀/api,我们访问/movie/top250就当于访问了:localhost:8080/api/movie/top250(其中localhost:8080是默认的IP和端口)。

    在index.js中的proxyTable中拦截了/api,并把/api及其前面的所有替换成了target中的内容,因此实际访问Url是http://api.douban.com/v2/movie/top250。

    至此,纯前端配置代理解决axios跨域得到解决。

    方案2:后端处理跨域问题,加个过滤器即可解决,如下:

    import javax.servlet.*;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    /**
     * 跨域过滤器
     * @author jitwxs
     * @since 2018/10/16 20:53
     */
    public class CorsFilter implements Filter {
        @Override
        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
            HttpServletResponse response = (HttpServletResponse) res;
            HttpServletRequest request = (HttpServletRequest) req;
    
            // 不使用*,自动适配跨域域名,避免携带Cookie时失效
            String origin = request.getHeader("Origin");
            if(StringUtils.isNotBlank(origin)) {
                response.setHeader("Access-Control-Allow-Origin", origin);
            }
    
            // 自适应所有自定义头
            String headers = request.getHeader("Access-Control-Request-Headers");
            if(StringUtils.isNotBlank(headers)) {
                response.setHeader("Access-Control-Allow-Headers", headers);
                response.setHeader("Access-Control-Expose-Headers", headers);
            }
    
            // 允许跨域的请求方法类型
            response.setHeader("Access-Control-Allow-Methods", "*");
            // 预检命令(OPTIONS)缓存时间,单位:秒
            response.setHeader("Access-Control-Max-Age", "3600");
            // 明确许可客户端发送Cookie,不允许删除字段即可
            response.setHeader("Access-Control-Allow-Credentials", "true");
            
            chain.doFilter(request, response);
        }
    
        @Override
        public void init(FilterConfig filterConfig) {
    
        }
    
        @Override
        public void destroy() {
        }
    
        /*
        注册过滤器:
        @Bean
        public FilterRegistrationBean registerFilter() {
            FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>();
            bean.addUrlPatterns("/*");
            bean.setFilter(new CorsFilter());
            // 过滤顺序,从小到大依次过滤
            bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
    
            return bean;
        }
         */
    }
    

    以上axios解决跨域的方案,希望能解决大家遇到的跨域问题,如有问题请添加评论。

    -------------------------------------------------------------------------分割线-------------------------------------------------------------------------------------

    根据评论区内容,区分一下生产环境和开发环境,集体配置如下:

    1.在config文件夹里面创建一个api.config.js的配置文件

    const isPro = Object.is(process.env.NODE_ENV, 'production')
    
    console.log(isPro);
    
    module.exports = {
      baseUrl: isPro ? 'https://www.***/index.php/Official(线上地址)' : 'api/'
    }

    2.在main.js文件里面引入上面文件,这样就可以保证动态的匹配生产和开发环境的定义前缀了,代码如下:

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import 'bootstrap/dist/js/bootstrap.min'
    import 'bootstrap/dist/css/bootstrap.min.css'
    import axios from 'axios'
    import apiConfig from '../config/api.config'
    
    Vue.prototype.$axios = axios;
    Vue.config.productionTip = false;
    axios.defaults.baseURL = apiConfig.baseUrl;// 配置接口地址
    axios.defaults.withCredentials = false;

    以上两步即可解决vue的跨域问题,并且可以可以直接build打包到线上,如有问题,请评论区留言,希望对你有所帮助。

    展开全文
  • Vue 3.0 axios跨域问题解决方案

    千次阅读 2020-08-15 21:52:39
    1.在vue.config.js文件做如下配置 target: 配置跨域请求的地址 changeOrigin: 是否跨域 pathRewrite: 路径重写 2.request.js(拦截器页面)如下配置 **这里的baseURL要修改成与vue.config.js文件设置代理名称(/...

    1.在vue.config.js文件中做如下配置

    target: 配置跨域请求的地址
    changeOrigin: 是否跨域
    pathRewrite: 路径重写

    2.request.js(拦截器页面)如下配置
    **这里的baseURL要修改成与vue.config.js文件中设置代理名称(/api)相同的名字

    3.具体请求页面如下配置(不需要做特殊配置)**

    url: 具体请求接口

    我是根据自己的项目配置的,大家可以自己对照一下,错误的地方欢迎指正!

    展开全文
  • 主要介绍了Vue-cli3.x + axios 跨域方案踩坑指北,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 那么在其他vue组件就可以this.$axios调用使用 第二步:在webpack配置一下proxyTable(config之下的index.js) dev: { 加入以下 proxyTable: { '/api': { target: 'http://api.douban.com',//设置你调用的接口域名...
  • vue中axios跨域请求解决

    千次阅读 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' import Axios from 'axios' Vue....

    一,首先在文件中下载axios

    cnpm install axios --save-dev

    二、在main.js中引入及获取对象

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import Axios from 'axios'
    
    Vue.prototype.$axios = Axios

    三、在config里面的index.js文件里设置proxyTable

    const path = require('path')
    
    module.exports = {
      dev: {
    
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
        	'/api': {
            target: 'http://api.douban.com/v2',//此处可以换成自己需要的地址
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
         }
        },

    四、main.js里添加host

    五、数据请求

    注意:配置文件后,要重新启动哦!!!

    展开全文
  • Vuecli3 axios跨域请求解决方案 前端页面的地址 http://localhost:8080/ 后端接口地址 http://localhost:3005/ 百度到的解决方案(几乎都是这样配置的): 1、在main.js添加一下代码 import axios from 'axios'...
  • electron-vue使用axios跨域解决

    千次阅读 2019-10-10 10:56:59
    一开始查找了vue使用axios跨域的问题如何解决,但是electron-vue中没有config文件夹,后来查找了electron-vueaxios跨域问题 在.electron-vue文件夹下dev-runner.js修改如下代码 const server = new ...
  • Vue-Axios跨域-如何解决跨域问题

    千次阅读 2020-04-29 17:04:56
    开发过程,前台跟后台需要进行数据交互,由于浏览器安全机制,直接使用axios会产生跨域问题,访问不到后台数据,因此我们需要配置代理。 解决方案 代理解决跨域的解释: 客户端直接请求服务端的数据会存在跨域问题...
  • 下面小编就为大家分享一篇vue中axios解决跨域问题和拦截器的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 我们在vue开发中用axios进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢? 这是因为CORS跨域分为 简单...
  • vue使用axios跨域请求

    2021-09-21 00:35:42
    axios跨域请求的时候默认会自带服务器地址,想要跨域就不能自带这个地址,,而请求别的地址 created(){ //设置axios 跨域 地址 Vue.prototype.$http =axios; axios.defaults.baseURL="http://localhost:8080" }...
  • vue3 axios解决跨域问题

    2021-08-12 21:07:57
    在package.json同级目录下新建文件名字(文件名字必须为这个)为vue.config.js vue.config.js的内容为 module.exports = { devServer:{ host:'localhost', port:8080, proxy:{ '/api':{ target:'...
  • 前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js配置代理服务器。 0:前提条件 1:安装vue-lic 2:安装axios 用于发送请求。 1:将任何未知请求转发到代理服务器 如: 前端地址:...
  • vue-cli 4.x + axios跨域解决方案

    千次阅读 2020-04-18 21:19:26
    之前在做 vue+node.js 前后端分离项目的时候,遇到 axios 不支持跨域的问题,网上找了很多资料,但很少有将 vue-cli4.x 版本的,当时看的是这位大佬的博文 指路:Vue-cli 3.x + axios 跨域方案...
  • vue-axios跨域问题

    2018-03-08 13:46:05
    VUE2.0的 axios 在实际接口调用常常会遇到跨域问题。一下简单介绍了如何解决跨域问题。 1.首先你的axios要安装成功,具体的请参考 http://blog.csdn.net/qq_38209578/article/details/79225698 2.通过编辑器...
  • VUE axios跨域问题解决

    2020-11-25 11:46:32
    在使用axios进行接口请求的时候会存在跨域的问题,如果后端未限制的情况下,从前端出发,可是进行如下处理: 一、在main.js文件,导入模块, import axios from 'axios' Vue.prototype.$axios = axios axios....
  • vue+axios跨域报错

    2021-07-17 20:52:57
    flask+axios $http.post()表单数据传不到后端-跨域、数据传输 浏览器f12console报错 报错内容: Access to XMLHttpRequest at 后台接口 from origin 前端地址 has been blocked by CORS policy: No ‘Access-...
  • Vue.prototype.$axios = axios axios.defaults.baseURL = '/api' //关键代码,配置数据所在服务器的前缀 ...省略 步骤二: 在文件"项目根目录/config/index.js",添加如下代码: ... module.exports = { dev: { ...
  • 一、既然使用axios直接跨域访问不可行,我们就需要配置代理, 只要安装了axios就可以。 安装操作如下 npm install axios --save-dev 二、配置BaseUrl,在main.js,配置数据所在服务器的前缀,在头部代码如下: ...
  • VueVue+axios 解决跨域问题

    千次阅读 2020-01-21 17:28:11
    关于浏览器的跨域问题,具体这里不说,仅仅记录个人解决跨域问题的方案 也是搜了许多不同的博文,但是都不管用,也不是很理解,自己百般尝试才有了一个解决方案 假设我的Vue项目运行在http://localhost:8080 后端的...
  • Vue-axios跨域请求

    万次阅读 2018-03-12 22:47:31
    在构建web项目的时候,我们难免会采用前后端分离的架构去进行项目,那么问题来了,在前端代码没有和后端打包时,我们如何获取数据,测试数据,这里就要运用到跨域了,本文介绍vue项目跨域方法。 在vue项目...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,794
精华内容 6,317
关键字:

vue中axios跨域解决方案

vue 订阅