zoukankan      html  css  js  c++  java
  • Vue开发中数据交互解决跨域问题

    使用webpack-simple脚手架构建的项目,在 webpack.config.js的devServer中增加proxy内容,设置代理

    第一种:测试接口为: http://192.168.1.150:8000/api/rest/getClientMessage

     1 devServer: {
     2     historyApiFallback: true,
     3     noInfo: true,
     4     overlay: true,
     5     // 配置服代理务器
     6     proxy: {
     7       '/api/*': {    // 只要指向/api/的请求,都会自动代理到下面的target的地址
     8             target: "http://192.168.1.150:8000",     //对方服务器地址
     9             secure: false,
    10             changeOrigin:true  
    11       }
    12     }
    13   }
    14   
    15   
    16 
    17 _feachData() {         //这里请求自己服务器
    18      this.$http.get("/api/rest/getClientMessage").then( (res) => {
    19         console.log(res);
    20         let result = res.data;
    21         this.login = result;
    22 })  

    第二种: 接口为:http://192.168.1.150:8080/hydro/rest/getClientMessage( 会存在session丢失的问题)

     1 devServer: {
     2     historyApiFallback: true,
     3     noInfo: true,
     4     overlay: true,
     5     // 配置服代理务器
     6     proxy: {
     7       '/webapp/api/*': {    // 只要指向/webapp/api/的请求,都会自动代理到下面的target的地址
     8             target: "http://192.168.1.150:8080/hydro",     //对方服务器地址
     9             pathRewrite: {
    10               '^/webapp/api':''
    11             },
    12             secure: false,
    13             changeOrigin:true  
    14       }
    15     }
    16   }
    17   
    18  _feachData() {
    19                  this.$http.get("/webapp/api/rest/getClientMessage").then( (res) => {
    20                     console.log(res);
    21                     let result = res.data;
    22                     this.login = result;
    23                 })
    24             }

    参考网址:Vue-cli代理解决跨域问题 https://www.jianshu.com/p/faa8303f8763

    第三种:接口为"http://192.168.1.150:8080/hydro/xxx/xxx"

    vue 前后端分离项目ajax跨域session问题解决:

    问题:实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆。

    解决:把proxyTable的映射路径改成项目名就可以了

    1 // 配置服代理务器
    2     proxy: {
    3       '/hydro/': {    // 只要指向/hydro/的请求,都会自动代理到下面的target的地址
    4             target: "http://192.168.1.150:8080",     //对方服务器地址
    5             secure: false,
    6             changeOrigin:true  
    7       }
    8     }







  • 相关阅读:
    CNN comprehension
    Gradient Descent
    Various Optimization Algorithms For Training Neural Network
    gerrit workflow
    jenkins job配置脚本化
    Jenkins pipeline jobs隐式传参
    make words counter for image with the help of paddlehub model
    make words counter for image with the help of paddlehub model
    git push and gerrit code review
    image similarity
  • 原文地址:https://www.cnblogs.com/tian-long/p/8418530.html
Copyright © 2011-2022 走看看