前端开拓 | 那些年曾谈起的跨域

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  
    }  
}  

在开拓进程中碰着的可以通过这种方法办理，可是达到出产情形时到底行使什么要领照旧必要斟酌的，事实要使处事数据变得越发的安详步崆最好的。

总结

以上讲了许多有关跨域的办理方案，有利也有弊，对付我而言也许越发的倾向于后端粑粑可能运维粑粑去办理跨域题目，事实前端处理赏罚起来事实不是很安详，并且后端可能运维处理赏罚起来也不是那么的贫困。

很感激各人操作这么长时刻来读这篇文章，文章中如有错误请在下方留言，会尽快做出修改。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!