javascript - 用webpack怎样解决跨域传递cookie的问题

Question

最近做的项目中用到了vue和webpack，前端参考了vue-vueRouter-webpack构建，现在的问题是很多需要登录才能访问的API因为跨域不能发送cookie到后端，造成前后端的对接的效率很低，请问要怎样配置才能将cookie发送到后端呢？

用proxy设置，如果path用‘*’，首页直接跳转到baidu.com,如果用‘/Api/’(所有的接口都在Api下)，ajax还是向本地发送请求，请问是什么原因呢？

下面是我的webpack.config.js配置文件：

//先清空 n-build 文件夹下的文件
var fs = require('fs'),buildPath='./App_IWhiteModules/';
var folder_exists = fs.existsSync(buildPath);
if(folder_exists)
{
   var dirList = fs.readdirSync(buildPath);
   dirList.forEach(function(fileName)
   {
       fs.unlinkSync(buildPath + fileName);
   });
   console.log("clearing " + buildPath);
}

//readfile
//先把index.html里面关于style和js的hash值都删除掉，避免在使用 npm run dev 的时候，路径还是压缩后的路劲
fs.readFile("index.html",'utf-8',function(err,data){
    if(err){
        console.log("error");
    }else{
      //将index.html里面的hash值清除掉
      var devhtml = data.replace(/((?:href|src)="[^"]+\.)(\w{20}\.)(js|css)/g, '$1$3');
      fs.writeFileSync('index.html', devhtml);
    }
});

var webpack = require('webpack');

//var vue = require("vue-loader");

//混淆压缩
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin({
    compress:{
        warnings: false,
        drop_debugger: true,
        drop_console: true
    }
});

//检测重用模块
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;

//独立样式文件
var ExtractTextPlugin = require("extract-text-webpack-plugin");



// 在命令行 输入  “PRODUCTION=1 webpack --progress” 就会打包压缩，并且注入md5戳 到 d.html里面
var production = process.env.PRODUCTION;

var plugins = [
  //会将所有的样式文件打包成一个单独的style.css
  new ExtractTextPlugin( production ? "style.[hash].css" : "style.css" , {
    disable: false//,
    // allChunks: true  //所有独立样式打包成一个css文件
  }),
  // new ExtractTextPlugin("[name].css" ),
  //自动分析重用的模块并且打包成单独的文件
  new CommonsChunkPlugin(production ? "vendor.[hash].js" : "vendor.js" ),
  function(){
      return this.plugin('done', function(stats) {
        var content;
        //这里可以拿到hash值   参考：http://webpack.github.io/docs/long-term-caching.html
        content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2);
        console.log('版本是：'+JSON.stringify(stats.toJson().hash));
        return fs.writeFileSync('App_IWhiteModules/assets.json', content);
      });
  }
];

//发布编译时，压缩，版本控制
if (process.env.PRODUCTION) {
  //压缩
  plugins.push(new webpack.optimize.UglifyJsPlugin({
      compress: {
          warnings: false,
          drop_debugger: true,
          drop_console: true,
      }
  }));
}

/*
  版本控制
  package.json中的
    "html-webpack-plugin": "^1.6.2",
  模块是把生成的带有md5戳的文件，插入到index.html中。
  通过index.tpl模板，生成 index.html
 */
var HtmlWebpackPlugin = require("html-webpack-plugin");
//HtmlWebpackPlugin文档 https://www.npmjs.com/package/html-webpack-plugin
//https://github.com/ampedandwired/html-webpack-plugin/issues/52
plugins.push( new HtmlWebpackPlugin({
  filename:'../index.html',//会生成d.html在根目录下,并注入脚本
  template:'index.tpl',
  inject:true //此参数必须加上，不加不注入
}));
var path = require('path');
var node_modules_dir = path.join(__dirname,'node_modules');
module.exports = {
    entry: {
        vendors: ["vue","vue-router"],
        // bootstrap: "bootstrap-webpack!./bootstrap.config.js",
        build:  "./src/app.js"
    },
    output: {
        path: "./App_IWhiteModules",
        /*
                publicPath路径就是你发布之后的路径，
                比如你想发布到你站点的/util/vue/build 目录下, 那么设置
                publicPath: "/util/vue/build/",
                此字段配置如果不正确，发布后资源定位不对，比如：css里面的精灵图路径错误
         */
        publicPath: "/App_IWhiteModules/",
        filename: production ? "[name].[hash].js" : "[name].js"//"build.[hash].js"//[hash]MD5戳   解决html的资源的定位可以使用 webpack提供的HtmlWebpackPlugin插件来解决这个问题  见：http://segmentfault.com/a/1190000003499526 资源路径切换
    },
    module: {
        preLoaders:[
            // {
            //     //代码检查
            //     test:/\.js$/,exclude:/node_modules/,loader:'jshint-loader'
            // }
        ],
        loaders: [
            // 加载vue组件，并将css全部整合到一个style.css里面
            // 但是使用这种方式后 原先可以在vue组件中 在style里面加入 scoped 就不能用了,
            // 好处是使用了cssnext，那么样式按照标准的来写就行了，会自动生成兼容代码 http://cssnext.io/playground/
            {
              test: /\.vue$/,
              loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!cssnext-loader")},
            {test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'}, // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL
            {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
            // { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' }
       ]
    },
    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime']
    },
    vue:{
      css:ExtractTextPlugin.extract("style-loader",
                  "css-loader?sourceMap!cssnext-loader"),
      autoprefixer: {
          browsers: ['> 1%','Firefox > 20','last 2 versions']
      }
    },
    plugins : plugins,
    devServer: {
        historyApiFallback: true,
        host: '0.0.0.0',
        proxy: {
            "/Api/*": {target: "http://baidu.com", host: "baidu.com"},
    }
},
    // devtool: 'source-map',
    // resolve: {
    //     // 现在可以写 require('file') 代替 require('file.coffee')
    //     extensions: ['', '.js', '.json', '.coffee','vue']
    // }
};

server.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

var proxy = {
    "/Api/*": {target: "http://baidu.com", host: "baidu.com"},
};

var app = new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    historyApiFallback: true,
    proxy: proxy,
    hot: true,
});

app.listen(9090, '0.0.0.0', function (err, result) {
    console.log('http://localhost:9090');
    if (err) {
        console.log(err);
    }
});

Answer 1

不打算用 CORS? https://developer.mozilla.org...

Answer 2

用服务代理，vue-cli生成的项目已经写好代理的代码，只要配置好就行了

Answer 3

跨域想带上 cookie，需要配置 withCredentials: true