前端开发过程中解决跨域问题

作为一名前端开发人员，特别是在前后端分离盛行的现在，跨域是不可避免的问题，那么如果你还跑去要后端人员帮你在接口上添加允许跨域的响应头是不是就太low了一点；

众所周知，解决跨域问题的办法有三种，后端设置、JSONP、和代理；这里就给大家讲讲我在开发过程中用过的一些代理；

webpack-dev 自带的代理服务器

单页面开发流行的情况下，如果你的项目是用webpack开发的，那么久好办了，webpack有自带的代理机制；在webpack的config设置文件中有proxy这么一项配置

proxy:{"/api":{target:"http://127.0.0.1:88",secure: false,changeOrigin: true}
}

在config文件中加上这个配置的话，那么你的项目中要是“/api”的接口都会被代理到”http://127.0.0.1:88/api“这个地址，那么这里你可以写上后端接口的地址；从而在开发的时候就不用跑去麻烦后端人员，也不会有跨域的问题出现；

如果是使用框架的脚手架进行项目搭建，也可以顺着文件的引用关系去找到这个配置在哪个位置，进行修改
比如 vue-cli 中 npm start 的时候引用的webpack 配置文件是build文件下面的webpack.dev.conf；而webpack.dev.conf里面就有一个配置项 proxy: config.dev.proxyTable, config则是引用的 config文件下的index.js ;所以找到对应的位置进行设置就可以了

自己搭建代理服务器

上面的情况是使用webpack自带的代理机制；但是如果在开发过程中没有使用webpack这样开发插件；比如用jquery开发或者原生JS开发过程中遇到了跨域的问题，我们就只能自己想办法搭建一个代理服务器；

nodeJS搭建代理服务器

node.js现在算是前端人员必备的一个知识，因为是javascript中唯一能做后端的语言；它同样能够实现代理机制；不过他的实现方法看起来就没有那么高端
代码如下：

const express = require('express');
const proxy = require('http-proxy-middleware');//引入代理中间件
const app = express();
// Add middleware for http proxying
const apiProxy = proxy('/api', { target: '此处填写代理的目标地址',changeOrigin: true});
app.use('/api/*', apiProxy);//api子目录下的都是用代理
app.listen(63342, () => {console.log('Listening on: http://localhost:80');
});

这里我是用webstorm开发工具；63342是webstorm自带的端口；如果开发环境本身与代理服务器也产生了跨域问题；那么久需要在代理服务器上加上允许跨域的响应头

const express = require('express');
const proxy = require('http-proxy-middleware');//引入代理中间件
const app = express();
// Add middleware for http proxyingfunction onProxyRes(proxyRes, req, res) {proxyRes.headers["Access-Control-Allow-Origin"]=" *"; //允许的来源//OPTIONS通过后，保存的时间，如果不超过这个时间，是不会再次发起OPTIONS请求的。proxyRes.headers["Access-Control-Max-Age"]="86400";//!!!之前我碰到和你一样的问题，这个没有加导致的。proxyRes.headers["Access-Control-Allow-Headers"]=" Content-Type";//允许的请求方式proxyRes.headers["Access-Control-Allow-Methods"]=" OPTIONS, GET, PUT, POST, DELETE";var method = req.method;// OPTIONS请求直接返回成功 此处是处理浏览器出现options请求时的处理逻辑if (method === 'OPTIONS')  {res.append("Access-Control-Allow-Origin","*");res.append("Access-Control-Allow-Headers","Authorization");res.status(202).send();return;}
}const apiProxy = proxy('/api', { target: 'http://vjd63g.natappfree.cc',changeOrigin: true ,onProxyRes:onProxyRes});
app.use('/api/*', apiProxy);//api子目录下的都是用代理
app.get("/",function(req,res){console.log(req);res.send("aaa");
});
app.listen(3000, () => {console.log('Listening on: http://localhost:3000');
});

docker搭建nginx代理服务器

docker是Linux系统的一个功能；不过在windows系统也可以运行，需要安装虚拟机；windows 10 有自带的虚拟机功能，至于怎么安装我就不多说了，百度Docker 菜鸟教程里面有安装教程

对于docker 本人理解也并不深，只是在开发的时候尝试过用来做代理服务器；
镜像使用nginx官方镜像把下面的配置文件挂载到nginx的配置文件的default.cong文件；文件位置“/etc/nginx/conf.d/default.conf”
配置文件内容

server {listen       80;server_name  localhost;#charset koi8-r;#access_log  /var/log/nginx/host.access.log  main;location / {root   /usr/share/nginx/html;index  index.html index.htm;}location /api {proxy_pass http://140.143.204.213;proxy_ssl_trusted_certificate  conf.d/cert/phpcj.pem;proxy_ssl_server_name on;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   /usr/share/nginx/html;}# proxy the PHP scripts to Apache listening on 127.0.0.1:80##location ~ \.php$ {#    proxy_pass   http://127.0.0.1;#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {#    root           html;#    fastcgi_pass   127.0.0.1:9000;#    fastcgi_index  index.php;#    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;#    include        fastcgi_params;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {#    deny  all;#}
}

location /api {proxy_pass http://140.143.204.213;proxy_ssl_trusted_certificate  conf.d/cert/phpcj.pem;proxy_ssl_server_name on;}

这个位置就是代理配置的位置 proxy_pass 是代理目标地址
proxy_ssl_trusted_certificate 如果代理目标是https协议就需要证书；没有证书的话可以不要这一项；但是后面一下必须要有proxy_ssl_server_name on; 开启ssl证书

上面三种代理方法是我在开发过程中遇到过的，可能运用不是很好；希望对大家能有点帮助

浅谈前端开发过程中使用的代理方法相关推荐

python程序调用写好的代码_扣丁学堂浅谈Python编程中NotImplementedError的使用方法...
扣丁学堂浅谈Python编程中NotImplementedError的使用方法 2018-07-04 14:08:02 2559浏览本篇文章扣丁学堂 Python编程中raise可以实现报出错误的功 ...
浅谈软件开发过程中的项目管理
摘要:大量软件开发实例表明,如果不能在软件开发中加强项目管理,随着国内软件行业的不断发展与壮大,国内的软件开发企业将面临严峻的挑战性与风险性.因此,为了确保软件开发的效率与质量,必须认识到强化项目管理 ...
浅谈数据仓库建设中的数据建模方法
http://www.ibm.com/developerworks/cn/data/library/techarticles/dm-0803zhousb/ 所谓水无定势,兵无常法.不同的行业,有不同行 ...
数据建模_浅谈数据仓库建设中的数据建模方法
所谓水无定势,兵无常法.不同的行业,有不同行业的特点,因此,从业务角度看,其相应的数据模型是千差万别的.目前业界较为主流的是数据仓库厂商主要是 IBM 和 NCR,这两家公司的除了能够提供较为强大的数 ...
「offer来了」浅谈前端面试中开发环境常考知识点
「面试专栏」前端面试之开发环境篇
浅谈前端自动化构建 -- Grunt、Gulp、FIS
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:内容较多,建议通过左侧导航栏进行阅读前端自动化构建基本介绍一切重复工作本应自动化.将开发中的源代码,自动化的转换成生产环境中可以运行的程序, ...
前端类名优秀命名例子_这是一篇需要花费你15分钟阅读的干货！浅谈前端工程化...
01前端工程化的背景随着业务的扩展.业务需求更加复杂.项目团队的壮大以及项目的增多等.制定一套适用于团队的前端工程化方案很有必要. 02前端工程化是什么前端工程化是一个很广泛的话题.涉及的技术与解 ...
js压缩代码后怎么生成source map_浅谈前端代码加密
作者简介:于航,PayPal Senior Software Engineer,在 PayPal 上海负责 Global GRT 平台相关的技术研发工作.曾任职于阿里巴巴.Tapatalk 等企业.f ...
浅谈 Linux 系统中的 SNMP Trap 【转】
文章来源:浅谈 Linux 系统中的 SNMP Trap 简介本文讲解 SNMP Trap,在介绍 Trap 概念之前,首先认识一下 SNMP 吧. 简单网络管理协议(Simple Network ...
java 定时任务怎么关闭_浅谈springboot项目中定时任务如何优雅退出
在一个springboot项目中需要跑定时任务处理批数据时,突然有个Kill命令或者一个Ctrl+C的命令,此时我们需要当批数据处理完毕后才允许定时任务关闭,也就是当定时任务结束时才允许Kill命令生 ...

浅谈前端开发过程中使用的代理方法