前后端分离实践 — 如何解决跨域问题
随着前端越来越火，越来越多的人推崇前后端分离，后端只提供API，前端只负责消费API。这样我们就能更加专注自己的事情了，比如前端可以使用任何想要的工具（Webpack、Gulp等等），后端也不用因为集成前端的代码而苦逼加班了。这里不讨论前后端分离的必要性，更多可参考
这里主要分享前后端分离后，如何解决跨域问题
程序员，首先分享一下在
里面的解决方案, 大家可以使用一个
中间件，并作以下配置:
#config/application.rb
config.middleware.insert_before 0, &Rack::Cors&, :debug =& true, :logger =& (-& { Rails.logger }) do
origins ['http://localhost:3000']
resource '*',
:headers =& :any,
:methods =& [:get, :post, :delete, :put, :options, :head],
:max_age =& 0
更多配置请参考
当然，如果后端是
，我们也可以找到同样的中间件
请看以下配置
var express = require('express')
, cors = require('cors')
, app = express();
// 同样的，只支持开发环境跨域
if(process.env.NODE_ENV == 'development'){
app.use(cors());
这时候，后端程序员可能会说，为了保持跟生产环境配置一直，请直接用
来配置吧，这样能减少差异。啪啦啪啦...
直接看配置吧
# 配置可访问域名，注意需要添加相应host配置
server_name xxx.
#charset koi8-r;
error_page
500 502 503 504
location = /50x.html {
location /istore/v1 {
proxy_set_header Host $
proxy_set_header X-Forwarded-For $remote_
proxy_set_header X-Real-IP $remote_
# API Server
proxy_pass http://localhost:4000;
proxy_next_
location / {
proxy_set_header Host $
proxy_set_header X-Forwarded-For $remote_
proxy_set_header X-Real-IP $remote_
# Frontend Server
proxy_pass http://localhost:3000;
proxy_next_
proxy_http_version 1.1;
proxy_set_header Upgrade $http_
proxy_set_header Connection &upgrade&;
http-proxy-middleware
这时候前端也不服了，说，我们自己能搞定
PS： 其实这里用了Nginx配置之后，webpack的hot reload会存在比较大的延迟，具体原因还没研究
# 安装插件
cnpm install --save-dev http-proxy-middleware
# 添加配置
import proxy from 'http-proxy-middleware';
const apiProxy = proxy('/api/v1', {
target: 'http://localhost:4000',
changeOrigin: true,
browserSync({
baseDir: 'src',
middleware: [
你也可以通过添加chrome插件来支持跨域
关注下，有惊喜！微信搜索公众号：meitianyixi
扫一扫有惊喜PostCSS深入学习：Gulp设置
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
在上一篇文章中，我们介绍了如何在CodePen和Prepros中使用PostCSS。虽然里面的选项设置可以让你第一时间接触和使用PostCSS，但也有很多PostCSS插件限制你不能使用。
这篇教程将告诉你如何在 Gulp 配置中使用PostCSS插件，而且可以根据你自己需要的去配置所要的插件。这才是真正的进入到PostCSS插件生态系统中。
特别声明：如果你从未接触或使用命令来配置Gulp的任务，我建议你在阅读本教程之前先阅读前面我写的系列教程：《 网页设计的命令操作 》。
需要的条件
鉴于我们将需要使用Gulp，在开始后面的内容之前，我假设你的电脑本地环境已经具备了下面列出来的条件：
如果你无法确认你的电脑本地系统是否安装了这些，建议你跟着 这篇教程 操作一回，因为这些条件是我们进入教程后面必备条件。
当然你也可以先 阅读这篇教程 ，确保你对Gulp的基本操作有所了解。此外，按照教程中的“Gulp安装项目”部分，确保你的项目文件夹中有以下面所列文件：
一个 gulpfile.js 文件
一个 package.json 文件
根据项目所需安装依赖模块，运行 gulp install 会有一个 node_modules 文件夹
其实这些内容在网上一搜一大把，为了初学者更好的阅读接下的内容，这里提供一些参考文档。
在 、Mac OS X 與
中安裝 Node.js 網頁應用程式開發環境
Node.js 安装配置
NPM 套件管理工具
Gulp开发教程
前端构建工具gulp入门教程
PostCSS在Gulp中的基本配置
首先在你的项目中创建两个文件夹，一个命名为 src ，另一个命名为 dest 。 src 文件夹用来放置未处理的CSS文件，而 dest 用来放置PostCSS插件处理后的文件。
接下来需要做的就是在你的项目中安装 gulp-postcss 插件，安装好之后就可以使用POstCSS处理器。
在安装之前，配置一下 package.json 文件：
"name": "testPostCSS",
"version": "0.0.1",
"description": "test PostCSS gulp plugin",
"keywords": [
"gulpplugin",
"PostCSS",
"author": "damo",
"license": "MIT",
"dependencies": {
"postcss": "^5.0.0",
"gulp": "~3.8.10"
"devDependencies": {
"gulp-postcss": "^6.0.1"
打开你的命令终端，并且进入到你的项目根目录下，然后在命令终端输入下面的命令：
npm install --save-dev gulp-postcss
注：如果上面命令无法正常安装，建议在上面的命令前加上 sudo ：
sudo install --save-dev gulp-postcss
运行完上面命令之后，如果没出任何差错，在你的终端命令中可以看到类似下图的提示：
安装完成后你的项目结构看起来就应该像这样：
现在通过编辑器打开 gulpfile.js 文件，并且创建 gulp 和 gulp-postcss 变量，如下面代码所示：
var gulp = require('gulp');
var postcss = require('gulp-postcss');
我们现在可以设置一个任务，让PostCSS读取CSS原文件并且处理它。
添加的代码如下：
gulp.task('css', function () {
var processors = [
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
我们一起来看一下上在的代码。在第一行，设置了一个任务名叫 css 。这个任务将会执行一个函数，同时在这个函数中创建了一个名为 processors 的数组。现在这个数组为空，这里将插入我们想使用的PostCSS插件。
在 processors 数组后面，我们指定了需要处理的目标文件，即 src 目录中的任何CSS文件。
这里面使用了两个 .pipe() 函数，设置 postcss() 执行PostCSS，并且给 postcss() 传递 processors 参数，后面会告诉PostCSS要使用哪个插件。
接下来的第二个 .pipe() 函数，指定结过PostCSS处理后的CSS放置在 dest 文件夹中。
在 src 目录中创建一个测试文件 style.css ，并在这个文件中添加一些CSS的测试代码：
background:
现在在命令终端的项目目录下执行下面的命令：
这是刚才设置的任务，执行完上面的任务之后，在 dest 目录中可以找到一个新的 style.css 文件。
当你打开这个新文件后，你可以看到和你的源文件一样的代码。使用的代码并没有任何的改变，那是因为我们还没有使用任何的PostCSS插件。从先前的教程中，你就会知道它的插件实际上是会对CSS执行操作的。
添加PostCSS插件
现在我们添加需要的PostCSS插件： Autoprefixer (处理浏览器私有前缀)， cssnext (使用CSS未来的语法), precss (像Sass的函数)。
运行下面的命令，将插件安装到你的项目：
npm install autoprefixer --save-dev
npm install cssnext --save-dev
npm install precss --save-dev
其实也可以在命令中执行下面的代码，也可以达到相同的效果：
npm install autoprefixer cssnext precss --save-dev
注：安装 cssnext 和 precss 时需要一段时间，因为他们包括了多个插件。
接下来，在我们的项目中定义变量，将这些插件加载到我们的项目中。和前面的方式一样，在 gulpfile.js 文件中添加下面的代码：
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');
然后将这三个插件添加到 processors 数组中，更新后的数组如下：
var processors = [
autoprefixer,
三个插件已结添加到了 processors 数组中了，这个时候PostCSS会知道将这些插件功能应用到我们的CSS源文件中。
我们现在可以给 src/style.css 文件中添加一些测试文件和检测他们的工作。删除测试文件中以前的代码，并添加新的CSS样式代码：
/* Testing autoprefixer */
.autoprefixer {
/* Testing cssnext */
.cssnext {
background: color(red alpha(-10%));
/* Testing precss */
@if 3 & 5 {
background:
background:
在命令终端执行 gulp css 命令。在 dest 目录生成的文件会有下面的代码：
/* Testing autoprefixer */
.autoprefixer {
display: -webkit-
display: -webkit-
display: -ms-
/* Testing cssnext */
.cssnext {
background: rgba(255, 0, 0, 0.9);
/* Testing precss */
background: green
如上面编译出来的代码你应该看到了Autoprefixer给需要的属性添加了浏览器的私有前缀，第二个任务cssnext将颜色转换成 rgba() ，第三部分PreCSS检查了 @if @else ，编译符合需求的代码。
设置插件的选项
注：如果你想为一个插件配置选项参数，你可以在插件后面添加一对括号，并在里面传递选项的参数。例如，Autoprefixer需要指定对应的浏览器列表参数，你可以像这样设置：
var processors = [
autoprefixer({browsers: ['last 1 version']}),
分享你的项目
PostCSS最美之处就是可以将插件根据自己的需要做任意的组合。这对于确保其他的人希望在一个项目中有相同的PostCSS插件设置时，就提出了一个很大的挑战。这得感谢 npm ，我们可以通过他来管理插件依赖关系。
因为我们安装插件到项目中使用了 --save-dev 标志，在安装时会自动将依赖文件写入项目的 package.json 文件中。这意味着如果你想和他人分享你的项目，他们可能在命令终端运行 npm install 命令，就可以自动安装分享的插件。
有关于更多关于 npm 依赖关系管理的信息，你可以 点击这里 进行更多的了解。
来总结一下
接下来做个简单的总结：
通过 npm 创建项目，并且将 gulp 安装到 gulpfile 文件
安装 gulp-postcss 插件
设置你的 gulpfile.js 文件，将 gulp 和 gulp-postcss 加载到项目中
创建一个任务，来编译你的CSS
在任务中，设置一个 processors 数组
在 .pipe() 是设置一个 postcss() 函数，并且将 processors 传递给它
你可以根据上面的教程介绍，遵循相同的步骤，你可以将PostCSS任何插件安装到项目中。
通过 npm install &plugin_name& --save-dev 命令将插件安装到你的项目中
类似 var autoprefixer = require("autoprefixer") 代码在你的 gulpfile.js 文件中定义要加载的插件变量名
将变量名添加到你的 preprocessors 数组中
如果你感兴趣，可以 点击这里 将示例所有代码下载下来。
下一节：Grunt + PostCSS
在接下来的一节内容中，我们将一起讨论在项目中如何使用Grunt来配置PostCSS。
本文根据 @Kezz Bracey 的《 PostCSS Quickstart Guide: Gulp Setup 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： /tutorials/postcss-quickstart-guide-gulp-setup--cms-24543 。
常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
静静的走，静静的看，无论风雨，无论坎坷。
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net