精华内容
下载资源
问答
  • 通过设置访问代理,解决vue axios 跨域访问问题
  • Vue 如何解决跨域请求数据首先vue如何请求数据呢?解决跨域问题友情链接:365淘券吧 首先vue如何请求数据呢? vue 请求数据我采用了 axios 第一步: 打开cmd 进入到vue的项目目录 然后执行下面的命令安装axios ...

    首先vue如何请求数据呢?

      vue 请求数据我采用了 axios
      第一步: 打开cmd 进入到vue的项目目录 然后执行下面的命令安装axios
    
       npm install axios
    
    第二步: 配置axios 首先打开项目的main.js  导入axios,添加以下代码
    
    
       import axios from 'axios'
       Vue.prototype.$axios = axios;
    
    

    如果不跨域此时的请求接口代码如下:

      const that = this;
      this.$axios.get("/dic/list")//假如此时的vue项目的端口是8081,
         //此时访问地址是http://localhost:8081/dic/list ,目前的请求数据没有跨域
              .then(function(response) {
                console.log(response.data);
                that.tableData = response.data;
              })
              .catch(function(error) {
                console.info(error);
              });
    

    解决跨域问题

    第一步:打开config的index.js ,找到proxyTable ,设置一下代码

     proxyTable: {
    		 '/api':{
    		         target:'http://localhost:8888/school/', //跨域接口的端口是8888
    		         changeOrigin:true,//允许跨域
    		         pathRewrite:{
    		           '^/api':''
    		         }
    		       }
    	},
    

    第二步:打开main.js 继续设置 添加下面的代码

      axios.defaults.baseURL = '/api'
    

    第三步:重启项目 重新运行 (必须重启!!!)

      npm run dev
    

    第四步:请求代码和上面的一样

      const that = this;
      this.$axios.get("/dic/list")此时的vue项目的端口是8081
      //此时访问地址是http://localhost:8081/api/dic/list 
      //但实际请求的是http://localhost:8888/school/dic/list
        .then(function(response) {
          console.log(response.data);
          that.tableData = response.data;//赋值
        })
        .catch(function(error) {
          console.info(error);
        });
    

    以上就是解决vue跨域请求数据的问题。

    友情链接:365淘券吧

    友情链接: 365淘券吧

    展开全文
  • vue aixos解决跨域

    千次阅读 2017-09-06 16:35:47
    vue axios 跨域问题
    1,import axios from 'axios';
    // 创建基本的axios配置
    var $http = axios. create({
    });
    // 挂载到vue的原型
    Vue. prototype. $http = $http;

    created () {
    //console.log(this.$http)
    //请求路径直接连着dada写就可以

    this. $http. get( './data/1.html',{
    params : {
    q: '123',
    }
    }). then( function( msg){
    console. log( msg);
    }. bind( this)). catch( function( err){
    console. log( err)
    })
    },

    2,配置config下index.js文件 dev生产环境下的
    proxyTable:{
    '/data' :{
    target: 'http://www.xxxx.com.cn',
    changeOrigin: true,
    //路径重写
    pathRewrite:{
    '^/data' : '/data'
    }
    }
    },
    3,完成后重启服务








    展开全文
  • vue3.0解决跨域

    千次阅读 2019-07-15 15:57:54
    通过vue-cli3.x版本构建的项目使用proxy和以前的项目不同,而且3.x版本构建的时候可以选用typescript了。下面记录一下如何使用proxy跨域。 首先在根目录创建vue.config.js文件,这个配置文件在运行项目的时候自动...

    原文地址:vue-cli3.0项目使用proxy跨域
    通过vue-cli3.x版本构建的项目使用proxy和以前的项目不同,而且3.x版本构建的时候可以选用typescript了。下面记录一下如何使用proxy跨域。
    首先在根目录创建vue.config.js文件,这个配置文件在运行项目的时候自动加载。

    // vue.config.js
    module.exports = {
      devServer: {
        proxy: {
          '/api': {
            target: 'http://xxxx/device/', //对应自己的接口
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        }
      }
    }
    
    展开全文
  • 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打包到线上,如有问题,请评论区留言,希望对你有所帮助。

    展开全文
  • 前端使用Vue框架解决跨域问题

    万次阅读 2019-03-31 14:14:49
    如何解决这个问题? 方法一:后端可以下载cors包,对指定的前端域名允许请求;具体操作可以自行百度; 今天主要介绍的是前端人员不用去麻烦后端人员,就可以通过前端设置实现跨域请求; 方法二:前端设置...
  • 背景 跨域问题,来源于浏览器中的同源策略。...本文只讨论博主在 Vue 的学习过程中如何在 前端解决跨域问题,更多跨域解决方案参考这篇文章,感谢该博主的分享! 个人理解,如有错误,还请评论区多多指教! ...
  • vue配置解决跨域问题

    2019-04-10 20:36:35
    我们在使用vue时,经常要遇到跨域的问题,其实这个问题很好解决,只需我们在vue-cli中配置一下即可。 实现跨越请求: 在config文件夹下找到index.js proxyTable: { "/baidu_music_api": { target: ...
  • Vue如何解决跨域问题

    2020-01-02 21:41:20
    关于跨域问题,前前后后也看过很多东西,一般解决Vue当中存在的跨域问题,都采用的是改配置的方法。这种方法相对简单,但是只在编译器里使用有效,当你将前端打好的包和后台部署到tomcat等服务器上,就会发现跨域的...
  • VUE开发环境和生产环境里面解决跨域的几种方法? 什么是跨域跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域解决方案 proxyTable ...
  • vue代理解决跨域问题

    千次阅读 2018-07-23 10:54:11
    1、修改config/index.js 注: host配置0.0.0.0方便移动端预览,但要注意port 需配置3000,4000这样的端口,启动服务后可访问localhost... 代理跨域使用vue-resource this.$http.get('/api/请求地址', {参数}) ...
  • 【Spring Boot 26】分别在SpringBoot和Vue解决跨域问题.pdf
  • vue转发代理解决跨域 创建vue.config.js,在vue项目的根路径下 module.exports = { devServer: { /* 启动端口号,如果端口号被占用,会自动递增1 */ port : 9999, /* 访问主机 */ host: "localhost",
  • vue前端解决跨域问题(axios)

    千次阅读 2020-06-15 12:29:28
    vue前端解决跨域问题(axios)1、安装环境2、配置代理1.在config文件夹下的index.js文件中的proxyTable字段中,作如下处理:2.在main.js,进行如下配置3.原理 1、安装环境 需要安装 axios,http-proxy-middleware 等 ...
  • VUE3.0是没有config文件夹的,但是在根目录vue.config.js文件。通过对这个文件的修改最终实现了跨域请求。添加代码如下。 module.exports = { lintOnSave: false, publicPath:'', devServer: { proxy: { // ...
  • vue项目解决跨域问题

    千次阅读 2018-07-23 17:07:57
    vue在本地跑,run个dev啥的,会面临到跨域问题 解决:在config的index.js文件里,dev模块加上: proxyTable: {  '/api': {  target:'http://zhinenghuapen', //你要请求的接口地址  changeOrigin: true, ...
  • Vue学习总结-Vue前端解决跨域问题

    千次阅读 2020-12-02 22:56:24
    解决跨域问题,正常情况下有两种,既然涉及到两端,那么大的就是从两端各自处理。 第一种:从后端处理。就是在后端代码中通过过滤器等方式允许请求进行跨域访问, 这种方法在之前的springboot文档中有记录,此处...
  • 本地vue调试解决跨域问题

    千次阅读 2019-05-30 16:24:05
    本地vue调api接口的时候,要注意跨域访问的问题 一.首先在config目录下新建一个js文件,proxyConfig.js 二.proxyConfig.js文件内容 module.exports = { proxyList: { '/apis': { // 测试环境 target: '...
  • 在根目录 创建 vue.config.js //文件 箭头所指的就是需要跨域的接口地址 下面的pathrewrite 就是给这个api 起了一个别名 下面展示如何调用 就解决跨域
  • vue解决跨域问题

    2020-10-21 16:07:28
    方法1.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 方法2.使用JQuery提供的jsonp ...
  • vue脚手架解决跨域问题

    千次阅读 2019-06-25 16:10:14
    1 修改config/index.js文件 proxyTable: { '/':{ ... changeOrigin: true } } ...2 重新启动,更改本地请求主机为...3 上线需改回后端提供主机 备注:主机可设置全局变量,请求时拼接,每次只需要更改这个全局变量
  • SpringBoot+Vue完美解决跨域问题

    千次阅读 2019-10-24 15:27:07
    本人做后端用springboot,同时前端用vue,遇到了跨域问题,以下为解决方案和心得 1、浏览器同源策略 什么是浏览器同源策略? 简单的来说,如果两个页面的协议,域名和端口(如有)都相同,则两个页面具有相同的源。 ...
  • vue3版本开始,项目目录改变,config文件夹不存在,在根目录下创建名为vue.config.js的文件,在文件中添加请求代理,代码如下: module.exports = { devServer: { open: true, //是否自动弹出浏览器页面 host: ...
  • 本文给大家介绍了vue项目中跨域问题的完美解决方案,通过更改header,使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建),具体内容详情大家跟随脚本之家小编一起学习吧
  • 使用的是服务器代理方式解决跨域 第一步 在vue项目根目录中创建文件夹vue.config.js文件 (根目录就是项目名称目录就是根目录,直接在项目名称上右击创建文件) 注意:文件名是固定的vue.config.js 第二步 打开文件vue....
  • vue解决跨域问题

    2018-04-14 18:03:14
    axios.defaults.withCredentials = true

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,511
精华内容 15,804
关键字:

vue3怎么解决跨域

vue 订阅