聊聊跨域

落日映苍穹つ 2022-05-30 05:07 186阅读 0赞

> 今天去面试和面试官聊到了跨域的问题，但这不是一个简单的问题……………….

当问及我怎么解决跨域问题时，脑子里面立马浮现自己前段时间在做音乐webApp项目时用到的jsonp跨域，清晰的记得当时是用jsonp，关于jsonp的实现原理这里不再赘述，推荐一篇不错的博文 [http://blog.csdn.net/u014607184/article/details/52027879][http_blog.csdn.net_u014607184_article_details_52027879]，当然除了jsonp推荐使用的那就  
CORS(Cross-origin resource sharing)方式，在服务端设置响应头：’Access-Control-Allow-Origin’,’\*’  
![这里写图片描述][549]

回到主题，如果是vue项目在开发阶段可以通过代理服务器来解决跨域的问题，但是上线后会不会碰到接口不能访问的情况？？？

> 在本地跑的好好的Vue怎么发布到线上就不行了，思来想去觉得是环境问题。原来这是由于开发环境和生产环境的接口地址不同导致，发布后Vue无法访问接口，自然获取不到数据。  
> 那么，如何优雅地解决这个问题，不需要频繁地切换接口地址。

首先，在config中找到以下两个文件：

/config/dev.env.js
    /config/prod.env.js

这两个文件就是针对生产环境和发布环境设置不同参数的文件,打开dev.env.js文件，如下：

module.exports = {
        NODE_ENV: '"development"',
        APP_ORIGIN: '"https://wallstreetcn.com"'
    }

在NODE\_ENV下增加一行：

module.exports = {
        NODE_ENV: '"development"',
        BASE_API: '"http://192.168.0.140:3001"',
        APP_ORIGIN: '"https://wallstreetcn.com"'
    }

然后修改prod.env.js:

module.exports = {
        NODE_ENV: '"production"',
        BASE_API: '"http://*.*.*.*:3001"',
        APP_ORIGIN: '"https://wallstreetcn.com"'
    };

然后，在项目中这样调用：

// 配置API接口地址
    var root = prod.env.BASE_API

或者是修改工程下config文件夹下的index.js中的dev:\{\}部分。代码如下：主要修改的是

proxyTable：\{\}内部的内容

dev: {
            env: require('./dev.env'),
            port: 8080,
            autoOpenBrowser: true,
            assetsSubDirectory: 'static',
            assetsPublicPath: '/',
            proxyTable: {
                '/api/**': {
                    target: 'http://api.douban.com/v2', //表示你跨域请求的接口的域名
                    secure: false, //如果是https接口，需要配置这个参数
                    changeOrigin: true, //如果接口跨域，需要进行这个参数配置
                },
                '/users/*': {
                    target: 'http://127.0.0.1:8089'
                }
            },
            // 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
        }

> 最后想问下：跨域问题不知到有没有用charles这个抓包工具来解决的？

[http_blog.csdn.net_u014607184_article_details_52027879]: http://blog.csdn.net/u014607184/article/details/52027879
[549]: /images/20220530/ee18a115cbce4a4da296acbf6272c0fa.png