精华内容
下载资源
问答
  • 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打包到线上,如有问题,请评论区留言,希望对你有所帮助。

    展开全文
  • 首先我简单的谈谈自己对跨域的一个理解: 简单的来说就是当前的网址和你需要请求数据的网址不一样,具体怎么不一样,可以概括为几点:...vue2.0的解决办法: 需要修改的文件为 webpack.base.conf.js 文件目录如下图:

    首先我简单的谈谈自己对跨域的一个理解:

    简单的来说就是当前的网址和你需要请求数据的网址不一样,具体怎么不一样,可以概括为几点:首先是一个http和https不一样,这是协议不一样,属于跨域,然后访问的端口号不一样,也是属于跨域,还有就是例如:http://www.baidu.com和http://www.baidu.com/index.html这两个就不是属于跨域,因为他们有相同的端口、请求协议、域名。

    vue2.0的解决办法:
    需要修改的文件为 webpack.base.conf.js
    文件目录如下图:
    在这里插入图片描述

    module.exports = {
    	// 配置转发代理  webpack.base.conf.js
    	devServer: {
    	  disableHostCheck: true,
    	  port: 8080,
    	  proxy: {
    	    '/api': {
    	      target: '192.168.1.111:8601',
    	      ws: true,
    	      pathRewrite: {
    	        '^/api': '/api'
    	      }
    	    }
    	  }
    	}
    }
    

    注意文件位置就行port可以不用改

    vue3.0的解决办法

    在src文件夹下面新建vue.config.js
    内容为:

    module.exports = {
        devServer: {
            proxy: {
                '^/api': {
                    target: 'http://192.168.200.199:8601',
                    changeOrigin: true
                }
            }
        }
    }
    

    ^/api指的是访问路径为指定的网址后面接着的部分只要是/api都可以访问,发送请求
    这里需要注意的是target后面的就是需要请求的网址。

    展开全文
  • 在我们使用Vue直接请求后端时,通常会报跨域问题,如下图: 要解决这个问题,方案有很多种,最简单的莫过于vue-cli的devServer配置。 devServer配置 在vue项目下创建vue.config.js文件,如下图: 在vue....

    背景:


    在我们使用Vue直接请求后端时,通常会报跨域问题,如下图:

    要解决这个问题,方案有很多种,最简单的莫过于vue-cli的devServer配置。

    devServer配置


    在vue项目下创建vue.config.js文件,如下图:

    在vue.config.js中写入devServer配置,例如:

    module.exports = {
        devServer: {
          proxy: {
            "/api": {
              target: "http://localhost:8081/",
              pathRewrite: {
                "^/api": "",
              },
            },
          },
        },
      };

    调用时,比如axios.get("/api/xxx");会被自动代理到http://localhost:8081/xxx

    展开全文
  • vue dev开发环境跨域和build生产环境跨域问题解决

    vue dev开发环境跨域和build生产环境跨域问题解决

    参考文章:

    (1)vue dev开发环境跨域和build生产环境跨域问题解决

    (2)https://www.cnblogs.com/hanguidong/p/10365083.html

    (3)https://www.javazxz.com/thread-2229-1-1.html


    备忘一下。


    展开全文
  • vue2.0 配置跨域请求

    2021-03-22 15:16:51
    vue3.0配置跨域请求vue2.0跨域dev.env.js (开发环境)prod.env.jsindex.jsvue3.0跨域 vue2.0跨域 使用webpack-merge区分生成环境和开发环境,在项目根目录下新建config文件,并新建如下文件: dev.env.js (开发...
  • 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 ...
  • 在fonfig文件夹里面的index.js中加入proxyTable中的代码就... dev: {  // Paths  assetsSubDirectory: 'static',  assetsPublicPath: '/',  proxyTable: {//这里面就是需要添加的代码 '/api/getDisList'...
  • Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下 module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { ...
  • vue 跨域 proxy跨域处理

    2021-02-07 10:10:14
    跨域就是因为同源策略。为了安全的。 这里的配置跨域本质上就是将本地的地址转换成服务器需要的真正期望的地址。 本地地址 ... devServer: { proxy: { '/api': { target: 'http://www.test.com',
  • Vue--跨域

    2021-01-23 13:48:54
    跨域方法:devServer(开发服务器代理) 其他网址 VUE axios 跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource._王小二的博客-CSDN博客json - Vue Axios CORS policy: No '...
  • vue配置前端跨域

    2020-09-28 19:25:03
    vue配置前端跨域 1、初始化vue项目 vue init webpack my-project # 初始化项目 cd my-project # 进入项目路径 cnpm install # 安装依赖 cnpm install axios -S # 安装axios 2、在 src/main.js 中如下声明使用 mport...
  • Vue 如何解决跨域请求数据首先vue如何请求数据呢?解决跨域问题友情链接:365淘券吧 首先vue如何请求数据呢? vue 请求数据我采用了 axios 第一步: 打开cmd 进入到vue的项目目录 然后执行下面的命令安装axios ...
  • vue代理解决跨域

    2020-07-27 13:33:54
    vue设置代理跨域 通过伪造请求使得http请求为同源的,然后将同源的请求发送到反向代理服务器上,由反向代理服务器去请求真正的url,这样就绕过直接请求真正的url导致跨域问题 在config下新建proxyConfig.js 文件 ...
  • vue中axios跨域请求解决 一,首先在文件中下载axios cnpm install axios --save-dev 二、在main.js中引入及获取对象 import Vue from 'vue' import App from './App' import router from './router' import Axios ...
  • vue axios 请求跨域

    2020-11-25 17:40:18
    接上篇vue baseUrl多后端环境切换,换成真实的地址后发现接口总是不通,这对这个vue的配置还是理解不到位,这回做了波实验终于通透了 请求封装思路 1、将axios后端请求和前端请求分离开 这点是用baseURL做到,前端不...
  • Vue项目配置跨域访问和代理proxy设置

    万次阅读 2019-08-20 14:55:11
    Vue项目配置跨域访问和代理设置vue-cli代理Nodejs做中间时行路由转发后端跨域访问 在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题。有2种常用的解决方案 后端设置允许跨域访问 前端通过...
  • Vue项目解决跨域问题

    2021-05-06 10:27:32
    Vue项目解决axios请求跨域问题 设置axios请求根路径:axios.defaults.baseURL = 'api/' 在vue.config.js中添加如下代码(如果没有vue.config.js文件手动添加) devServer: { proxy: { '/api': { target:'...
  • vue cli3 跨域代理问题

    2021-03-23 13:58:50
    vue.config.js(没有的话就自己创建,在根目录下,与package.json同级) vue.config.js: module.exports = { devServer: { proxy: { '/api': { // 此处的写法,我访问的是...
  • vue 前端配置跨域

    2021-01-31 00:16:17
    1、设置 axios 的 baseURL axios.defaults.baseURL = '... 2、vue.config.js 设置跨域 devServer: { proxy: { // 跨域 "/api": { target: "http://127.0.0.1:4523/mock/372850", //目标地址 changeOrigin: true
  • VUE中的跨域请求处理

    2020-12-02 12:53:50
    VUE中的跨域请求处理 超新人使用vue,不习惯。由于项目中需要从js转到vue使用,直接使用jquery涉及到其他东西,后续麻烦。再学习尝试使用过程中查了不少本站以及其他站不少资料,故部分内容有所借鉴。 尝试了axios...
  • vue中解决跨域问题

    2021-01-10 16:09:15
    vue.config.js 是一个可选的配置文件(没有自己创建就行)和 package.json 同级 module.exports = { devServer: { proxy: { '/ajax': { target: 'http://m.maoyan.com', // ws: true, changeOrigin: true }
  • vue3.0配置跨域

    2020-05-17 01:28:10
    在项目根目录下找到vue.config.js,如果没有,新建一个,修改以下内容 module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, //以上的ip和端口是我们本机的;下面为需要...
  • Vue脚手架配置跨域

    2021-03-12 11:57:24
    如果你的项目需要配置跨域,你需要打来vue.config.js proxy注释 并且配置响应参数 !!!注意:你还需要将 src/config/env.development.js 里的 baseApi 设置成 '/' module.exports = { devServer: { // .... proxy:...
  • vue proxyTable跨域处理

    2019-03-31 19:57:07
    使用vue+vue-cli+vue-resource+element-ui开发后台管理系统时,遇到一个问题,后台给了一个接口,我这边用vue-resource请求数据,控制台总是报405错误和跨域错误 处理方法: 在vue-cli项目中的config文件夹下的index...
  • vue aixos解决跨域

    千次阅读 2017-09-06 16:35:47
    vue axios 跨域问题
  • vue项目的跨域配置

    2019-11-02 22:31:48
    使用vuecli + webpack进行项目开发时,遇到了需要跨域访问的情况,这里简单记录一下前端的跨域配置,如下: 1、配置本地代理 修改config文件夹下的index.js文件中的dev下的proxyTable属性,如下: ... dev: { //...
  • vue脚手架配跨域

    2021-01-04 21:03:21
    先创建 vue.config.js 在里面写入配置 module.exports = { devServer: { open: true, proxy: { '/api': { target: 'http://123:3000/', // 需要跨越的网址 changeOrigin: true, //允许跨域 pathRewrite: { ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,454
精华内容 4,581
关键字:

vue没有dev跨域

vue 订阅