zoukankan      html  css  js  c++  java
  • 解决vue-cli项目开发中跨域问题

    一、开发环境中跨域

    使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole。不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置,不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,通过修改vue proxyTable接口实现跨域请求。在vue-cli项目中的config文件夹下的index.js配置文件中,修改前的dev:

    dev: {  
        env: require('./dev.env'),  
        port: 8080,  
        autoOpenBrowser: true,  
        assetsSubDirectory: 'static',  
        assetsPublicPath: '/',  
        proxyTable: {}, 
        cssSourceMap: false  
      }

    只要修改里面的proxyTable: {}项

    dev: {
    
        // 静态资源文件夹
        assetsSubDirectory: 'static',
    
        // 发布路径
        assetsPublicPath: '/',
    
        // 代理配置表,在这里可以配置特定的请求代理到对应的API接口
        // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
        // 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
        proxyTable: {
          '/api': {
            target: 'http://xxxxxx.com', // 接口的域名
            // secure: false,  // 如果是https接口,需要配置这个参数
            changeOrigin: true, // 如果接口跨域,需要进行这个参数配置,为true的话,请求的header将会设置为匹配目标服务器的规则(Access-Control-Allow-Origin)
      pathRewrite: { '^/api': '' //本身的接口地址没有 '/api' 这种通用前缀,所以要rewrite,如果本身有则去掉 
     } } }, // 本地访问 http://localhost:8080 host: 'localhost', // can be overwritten by process.env.HOST

    然后重启项目npm run dev

    注意:

    接口地址原本是 /save/index,但是为了匹配代理地址,在前面加一个 /api,  因此接口地址需要写成这样的即可生效 /api/save/index。

    '/api' 为匹配项,target 为被请求的地址,因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉。

    1、参数proxyTable详解:

    vue-cli的config文件里的参数:proxyTable,这个参数主要是一个地址映射表,你可以通过设置将复杂的url简化,例如我们要请求的地址是api.xxxxxxxx.com/list/1,可以按照如下设置:

    proxyTable: {
      '/list': {
        target: 'http://api.xxxxxxxx.com',
        pathRewrite: {
          '^/list': '/list'
        }
      }
    }

    这样我们在写url的时候,只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.
    那么又是如何解决跨域问题的呢?其实在上面的'list'的参数里有一个changeOrigin参数,接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。增加的代码如下所示:

    proxyTable: {
      '/list': {
        target: 'http://api.xxxxxxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/list': '/list'
        }
      }
    }

    vue-cli的这个设置来自于其使用的插件http-proxy-middleware

    github:https://github.com/chimurai/http-proxy-middleware

    深入了解的话可以看该插件配置说明,似乎还支持websocket,很强大的插件。

    2、pathRewrite含义:

    用代理,首先你得有一个标识,告诉他你这个连接要用代理,不然的话,可能你的 html,css,js这些静态资源都跑去代理。所以我们只要接口用代理,静态文件用本地。'/iclient': {}, 就是告诉node,我接口只要是'/iclient'开头的才用代理。所以你的接口就要这么写 /iclient/xx/xx。最后代理的路径就是 http://xxx.xx.com/iclient/xx/xx。可是不对啊,我正确的接口路径里面没有/iclient啊,所以就需要pathRewrite,'^/iclient':'', 把'/iclient'去掉,这样既能有正确标识,又能在请求接口的时候去掉iclient。当然如果本身的接口中就有/iclient,那么就可以把pathRewrite这个参数去掉。

    二、在生产环境中跨域

    设置nginx配置文件:

    location /api {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://fanyi.baidu.com/v2transapi;
    }

    三、设置不同的接口地址

      平常我们团队开发时都在公司的局域网内,调用接口也是局域网内部的,但是项目上线时,请求接口是线上服务器端的,那么就有接口之间的来回切换问题。

      在使用vue-cli搭建项目以后,做相关配置就可以实现,不用手动更改接口路径,也可以请求不同环境下的接口。

      1、设置不同的接口地址

      先找到以下文件

      /config/dev.env.js

      /config/prod.env.js

      可以看到dev.env.js里面内容如下

    这是生产环境的参数配置,然后我们可以再上面文件加入一行代码,如下:这就是本地测试环境请求后台接口的域名

    然后找到prod.env.js文件,如下:

    我们加入一行代码,如下:这是我们上传服务器以后,请求后台接口的域名

    2、在代码中调用设置好的参数:

    比如我在本项目中重新封装axios(api文件在/src/api/index.js中),将配置好的接口地址作为baseURL拼接到接口路径中,应用参数部分如下:

    最后重新启动项目就可以了,当npm run dev的时候就运行在生产环境,当npm run build的时候就是正式的线上环境。

     后端程序代理

    有一种方法不需要后端的配合和修改服务器配置 ,我们自己就可以做到。就是我们自己启一个后端程序做代理。然后把所有的请求转发到服务器。这里要用到node的一个包http-proxy-middleware。关键代码(express)如下

  • 相关阅读:
    1104 Sum of Number Segments (20 分)(数学问题)
    1092 To Buy or Not to Buy (20 分)(hash散列)
    1082 Read Number in Chinese (25 分)(字符串处理)【背】
    1105 Spiral Matrix (25 分)(模拟)
    初识网络安全及搭建网站(内网)
    HTML5开发者需要了解的技巧和工具汇总(转)
    native+web开发模式之web前端经验分享
    移动平台3G手机网站前端开发布局技巧汇总(转)
    Asp.net 中图片存储数据库以及页面读取显示通用方法详解附源码下载
    使用H3Viewer来查看VS2010的帮助文档
  • 原文地址:https://www.cnblogs.com/web-record/p/9467258.html
Copyright © 2011-2022 走看看