webpack设置代理出现的问题

一、解决跨域问题有几种解决方案：
跨域资源共享 CORS
jsonp
proxy （Nginx代理或其他的服务器代理）
在服务端无法配合的情况下，代理是最可行的方案

二、之前vue项目用的是Node.js 代理中间件 http-proxy-middleware，react项目用的是CORS方案，因为新的api后端不再CORS，继续以前的请求直接请求远程服务器，返回405

OMPW47O[WCD52SH$Y])B4LH.png

顺便提一下，前端用fetch向后端发送post请求，产生了两个请求记录（OPTIONS和POST），这是由于fetch的实现机制导致的结果。当发生跨域请求时，fetch会先发送一个OPTIONS请求，来确认服务器是否允许接受请求。服务器同意后，才会发送真正的请求。 其实不仅仅是fetch，只要你满足以下几种情况，都会去发起一个 Preflighted requests，也就是options请求。
>It uses methods other than GET, HEAD or POST. Also, if POST is used to send request data with a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, ortext/plain, e.g. if the POST request sends an XML payload to the server using application/xmlor text/xml, then the request is preflighted.
>It sets custom headers in the request (e.g. the request uses a header such as X-PINGOTHER)

浏览器在发起跨域请求的时候会带着一个Origin header，那么其实就是个custom headers，那么也就会先触发一个Preflighted requests

简单点说就是跨域产生的问题，下面在webpack里面设置proxy

var path = require("path");
module.exports = {
    entry: './src/entry.js',
    output: {
        path: path.join(__dirname, ''),
        filename: 'bundle.js'
    },
    devServer: {
        host: '',
        port: '',
        contentBase: './',
        color: true,
        historyApiFallback: true,
        inline: true,
        proxy: {
                '/api/*': {
                        target: 'http://vsc.selmif.com/',
                        secure: false,
                        changeOrigin:true
                }
         }
    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react', "stage-2"]
                }
            },
            { test: /\.css$/, loader: 'style!css' },
            { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url-loader?limit=8192' }
        ]
    }
};

var path = require("path");
const context = ['/api', '/Uploads']
module.exports = {
    entry: './src/entry.js',
    output: {
        path: path.join(__dirname, ''),
        filename: 'bundle.js'
    },
    devServer: {
        host: '',
        port: '',
        contentBase: './',
        color: true,
        historyApiFallback: true,
        inline: true,
        proxy: [
            {
                context: context,
                target: 'http://xxx.xxxx.com/',
                secure: false,
                changeOrigin:true
            }
        ]
    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react', "stage-2"]
                }
            },
            { test: /\.css$/, loader: 'style!css' },
            { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url-loader?limit=8192' }
        ]
    }
};

上面两种配置方法都可以

但是在配置后再请求时依然

Paste_Image.png

返回405，我很郁闷，一开始以为是配置出现的问题，尝试了几种配置方案，发现都会发起options请求，甚至去查了webpack的server.js文件，但是感觉问题应该不是出在这里，然后重启服务器，在尝试请求，还是405，还是405，
突然发现，request URL 是正式服务器的地址

Paste_Image.png

是正式的地址，为什么是服务器的地址？我设置了代理，请求的应该是本地的接口，然后本地服务器在代理请求正式服务器，为什么是直接请求正式的地址？一查代码，发现是以前CORS设置时请求的是远程的地址，应该不需要请求这个，直接请求本地就可以了。

Paste_Image.png

OK

Paste_Image.png