webpack 本地开发时的跨域及react中跨域

跨域

由于浏览器的安全机制，规定了同源策略，即只允许同源下的接口交互。同源即协议、域名、端口号相同。那么要想访问其他域下的接口就涉及到了跨域。 js中跨域有一下几种方法

CORS 跨域nginx服务器代理jsonp

那么在webpack中是如何配置跨域的呢？

一、同域但端口号不同下使用 devServer.proxy

// webpack.config.js devServer: { proxy:{ '/api':{ // 重写路径可以整理 指定的访问路径 target: 'http://localhost：8888', pathRewrite:{'/api': ''} , // changeOrigin: true, // 服务端不同域时，设置为true 即target值为http://www.baidu.com时也可访问成功 } } }, // 我们也可以在访问一些路径时加一下mock数据 devServer: { before(app) { // 在使用其他中间件前拦截并使用自己设定的 app.get('/user',(req,res)=>{ res.json({name:'s_heep'}) }) } },

服务端是自己写的，同时启动服务时自动启动webpack及前端代码

// server.js let express = require('express'); // 基于node的开发框架 let app = express(); let webpack = require('webpack'); // npm i webpack-dev-middleware -D 安装中间件 let middleWare = require('webpack-dev-middleware'); // 引入这个 let config = require('./webpack.config.js'); // 配置文件 let compiler = webpack(config); app.use(middleWare(compiler)) app.get('/user',(req,res)=>{ res.json({name:'s_heep'}) }) app.listen(8888)

二、create-react-app解决跨域问题，那么我们可以在src下新建文件setupProxy.js

const proxy = require("http-proxy-middleware"); module.exports = (app)=>{ app.use(proxy("/api",{ target:"https://www.baidu.com", changeOrigin:true, pathRewrite:{ "^/api":"" } })) app.use(proxy("/users",{ target:"http://10.60.13.121:3000", changeOrigin:true, })) }

—以上如有瑕疵欢迎指出