前端开发 | 那些年曾谈起的跨域(8)

main.js

import http from "http";  
import httpProxy from "http-proxy";  
// 新建一个代理 Proxy Server 对象    
const proxy = httpProxy.createProxyServer({});     
// 捕获异常    
proxy.on('error', function (err, req, res) {    
  res.writeHead(500, {    
    'Content-Type': 'text/plain'    
  });    
  res.end('error');    
});       
// 在每次请求中，调用 proxy.web(req, res config) 方法进行请求分发    
const server = http.createServer((req, res) => {   
  // 在这里可以自定义你的路由分发    
  let host = req.headers.host, ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;    
  switch(host){    
    case 'www.a.com':     
        proxy.web(req, res, { target: 'http://localhost:3000' });    
        break;    
    case 'www.b.com':    
        proxy.web(req, res, { target: 'http://localhost:4000' });    
        break;  
    default:    
        res.writeHead(200, {    
            'Content-Type': 'text/plain'    
        });    
        res.end('Hello Aaron！');    
  }    
});    
server.listen(8080);  

如代码所示，当访问www.a.com的时候，请求就被转发到了3000接口上，访问www.b.com时就被转发到了4000这个接口上。这样就简单的完成了一个反向代理的工作。

在使用vue开发的时候难免也会遇到跨域问题，或许你根本就没有遇到，可能你们正好处于同一个域里面，还有一种可能就是，后端同学或者运维同学已经处理好有关跨域的相关操作。但是当在开发过程中遇到跨域的时候，什么前端应该有对应的解决办法。vue-cli是基于Node服务的，所以我们可以利用这个服务来做代理工作，暂时解决开发中的跨域问题。

build/webpack.config.js

module.exports = {  
    devServer: {  
        historyApiFallback: true,  
        proxy: [{  
            context: '/login',  //  url以/login为开头时启用代理  
            target: 'http://www.a.com:8080',  // 代理跨域目标接口  
            changeOrigin: true,  
            secure: false,  // 当代理某些https服务报错时用  
            cookieDomainRewrite: 'www.b.com'  // 可以为false，表示不修改  
        }],  
        noInfo: true  
    }  
}  

在开发过程中遇到的可以通过这种方式解决，但是到达生产环境时到底使用什么方法还是需要斟酌的，毕竟要使服务数据变得更加的安全才是最好的。

总结

以上讲了很多有关跨域的解决方案，有利也有弊，对于我而言可能更加的倾向于后端粑粑或者运维粑粑去解决跨域问题，毕竟前端处理起来毕竟不是很安全，而且后端或者运维处理起来也不是那么的麻烦。

很感谢大家利用这么长时间来读这篇文章，文章中若有错误请在下方留言，会尽快做出修改。

（编辑：ASP站长网）