webpack设置代理出现的问题

0.138字数 645阅读 10291

一、解决跨域问题有几种解决方案:
跨域资源共享 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

推荐阅读更多精彩内容