一、解决跨域问题有几种解决方案：
跨域资源共享 CORS
jsonp
proxy （Nginx代理或其他的服务器代理）
在服务端无法配合的情况下，代理是最可行的方案
二、之前vue项目用的是Node.js 代理中间件 http-proxy-middleware，react项目用的是CORS方案，因为新的api后端不再CORS，继续以前的请求直接请求远程服务器，返回405
顺便提一下，前端用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' }
]
}
};
上面两种配置方法都可以
但是在配置后再请求时依然
返回405，我很郁闷，一开始以为是配置出现的问题，尝试了几种配置方案，发现都会发起options请求，甚至去查了webpack的server.js文件，但是感觉问题应该不是出在这里，然后重启服务器，在尝试请求，还是405，还是405，
突然发现，request URL 是正式服务器的地址
是正式的地址，为什么是服务器的地址？我设置了代理，请求的应该是本地的接口，然后本地服务器在代理请求正式服务器，为什么是直接请求正式的地址？一查代码，发现是以前CORS设置时请求的是远程的地址，应该不需要请求这个，直接请求本地就可以了。
OK
