精华内容
下载资源
问答
  • Axios是不允许跨域访问的,别说跨域,跨端口都不行。例如某项目我本地vue前端frontEnd为`localhost:8888`,Java后台 backEnd为`localhost:8889` 。 这个时候就有两个方案了: - 修改`frontEnd`前端,支持跨域(通过...

    问题背景

    Axios是不允许跨域访问的,别说跨域,跨端口都不行。例如某项目我本地vue前端frontEnd为localhost:8889,Java后台 backEnd为localhost:8888

    报错信息: Access to XMLHttpRequest at 'http://localhost:8888/cert/certCompany/list2' from origin 'http://localhost:8889' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    在这里插入图片描述
    axios请求代码

    axios.post('http://localhost:8888/cert/certCompany/list2',JSON.stringify(this.searchParam))
    	  .then(function (response) {
    	    console.log(response.data);
    	  })
    	  .catch(function (error) {
    	    console.log(error);
    	  });
    

    这个时候就有两个方案了:

    解决方案

    main.js

    引入axios

    //引入axios  by zhengkai.blog.csdn.net
    import axios from 'axios'
    Vue.prototype.$axios = axios
    axios.defaults.baseURL = '/api'  //自动附加在所有axios请求前面,则可以省略/api,直接写'/xxxx/xxx'。否则需要设置'/api/xxxx/xxx'
    
    config.index.js

    改造proxyTable部分,引入虚拟代理 ,请求target这个地址的时候直接写成/api即可。

    dev: {
        env: require('./dev.env'),
        port: 8889,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
           //axios跨域改造 by zhengkai.blog.csdn.net
          '/api': {
            target:'http://localhost:8888/cert/', // 你请求的第三方接口
            changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
            pathRewrite:{  // 路径重写,
              '^/api': ''  // 替换target中的请求地址,也就是说/api=/target,请求target这个地址的时候直接写成/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
      }
    
    业务.vue

    修改请求为/api封装开头(但是如果你的借口包含/api的关键字的话,建议使用其他关键字)

    //axios跨域请求改造  by zhengkai.blog.csdn.net
    axios.post('/certCompany/list2',JSON.stringify(this.searchParam))
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
    

    验证效果

    请求不报错,没有烦人的No 'Access-Control-Allow-Origin' header is present on the requested resource.报错。
    在这里插入图片描述

    展开全文
  • Vue之Axios跨域问题解决方案

    万次阅读 多人点赞 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打包到线上,如有问题,请评论区留言,希望对你有所帮助。

    展开全文
  • axios跨域

    2021-05-27 21:59:10
    // 此处的写法,我访问的是http://localhost:8080/api/dataHome.json设置代理后,axios请求不需要把域名带上,只需要把路径前面加上 /api 即可。 target: 'http://v.juhe.cn/joke/content/', ...

    1.在vue.config.js中修改配置

    module.exports = {
        devServer: {
            proxy: {
                '/api': {
                    // 此处的写法,我访问的是http://localhost:8080/api/dataHome.json设置代理后,axios请求不需要把域名带上,只需要把路径前面加上 /api 即可。
                    target: 'http://v.juhe.cn/joke/content/',
                    // 允许跨域
                    changeOrigin: true,
                    ws: true,
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            }
        }
    }

     

    展开全文
  • axios 跨域

    千次阅读 2018-08-22 20:32:59
    最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东。越来它是vue-resource的替代品,官网也说了,以后都用axios, vue-resource不在维护。那么这个axios怎么用呢,上网搜索了一大堆,基本上都是...

    最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东。越来它是vue-resource的替代品,官网也说了,以后都用axios,

    vue-resource不在维护。那么这个axios怎么用呢,上网搜索了一大堆,基本上都是雷同,我也不知道那些作者有没有在本地测试过。至少我按照网上的做法,总不能成功。经过几天的奋斗,我终于把它搞清楚了,为了不让其他的小伙伴们走弯路,我把我在实际操作中的例子分享给大家,希望对大家有用。

    一、安装axios

    老规矩,要想使用axios,我们得安装它,安装方式:npm install axios

    二、客户端使用方式

    先来看看网上的答案,如图所示,我已经在图上标识过了,这种做法是错误的。

     

    正确的做法是去掉post,如图所示:

     

     

     

    三、服务器端设置

    虽然客户端跨域设置好了,但是你还是不能访问接口数据,必须在服务器端设置header属性,如图所示:

     

    四、axios方法封装

    一般情况下,我们会用到的方法有:GET,POST,PUT,PATCH,封装方法如下:

     

     

    五、封装后的方法的使用

    1、在main.js文件里引用之前写好的文件,我的命名为http.js

     

    2、在需要的地方之间调用,如图所示:

     

     

    说明:

    GET调用方法如下,其中url是接口地址

    this.$get(url).then((res) {

    //代码

    });

    POST调用方法如下,其中url是接口地址,data是请求的数据。

    this.$post(url,data).then({

    //代码

    });

    PATCH调用方法如下,其中url是接口地址,data是请求的数据

    this.$patch(url,data).then({

    //代码

    });

    PUT调用方法如下,其中url是接口地址,data是请求的数据

    this.$put(url,data).then({

    //代码

    });

    展开全文
  • 主要介绍了Nuxt使用axios跨域问题解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • ant design+axios跨域实现

    万次阅读 2020-08-04 16:50:17
    2.在config文件夹下创建proxy.tx文件,如果存在,在dev中添加axios环境代理,例如在我的demo中添加了/asd映射到http://localhost:8889 /** * 在生产环境 代理是无法生效的,所以这里没有生产环境的配置 * The ...
  • vue 解决axios 跨域问题

    2020-12-11 09:32:29
    vue 解决axios 跨域问题
  • 主要为大家详细介绍了vue使用axios跨域请求数据的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • axios跨域问题

    2019-09-27 16:15:59
    axios跨域问题 配置tomcat允许跨域访问 package com.zking.vue.util; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import ...
  • 下面小编就为大家分享一篇完美解决axios跨域请求出错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue中axios跨域交互

    2020-08-25 15:10:36
    Vue中axios跨域交互二级目录 二级目录
  • 下面小编就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue中axios跨域问题

    2021-04-01 10:25:29
    Vue中axios跨域问题 1 axios跨域问题 今天遇到一个问题,在node里的Vue项目中使用axios时向tomcat下的javaweb项目发送请求,出现报错。’‘CROS policy 类似的错误’‘ 在网上查了资料后发现大部分都是在webstorm ...
  • 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跨域请求

    万次阅读 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 跨域请求无法带上cookie的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 下面小编就为大家分享一篇vue2.0 axios跨域并渲染的问题解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本篇文章主要介绍了在Vue中如何使用axios跨域访问数据,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • axios 跨域请求详情

    2021-05-24 19:43:31
    axios 跨域请求详情 写这篇文章的背景是因为之前遇到的,在跨域的情况下通过 axios 发起的 get 请求正常,post 请求会在正式请求发送之前先发送一个 opstions 请求,而后端接口没有兼容 options,导致 404 的情况。 ...
  • electron-vue使用axios跨域解决

    千次阅读 2019-10-10 10:56:59
    一开始查找了vue使用axios跨域的问题如何解决,但是electron-vue中没有config文件夹,后来查找了electron-vue的axios跨域问题 在.electron-vue文件夹下dev-runner.js中修改如下代码 const server = new ...
  • vue前端axios跨域代理 安装axios 导入axios 使用proxyTable配置代理服务器 请求示例
  • 主要介绍了Vue.js 中 axios 跨域访问错误问题及解决方法,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 本篇文章主要介绍了webpack+vuex+axios 跨域请求数据,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,138
精华内容 1,655
关键字:

axios跨域