前端跨域问题自我整理

一、vue项目中

1、根目录中创建vue.config.js

module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
    },
  },
	lintOnSave:false, //关闭语法检查
	//开启代理服务器(方式一)
	// devServer: {
  //   proxy: 'http://localhost:5000'
  // }, 
	//开启代理服务器(方式二)
	devServer: {
    proxy: {
      '/atguigu': {
        target: 'http://localhost:5000',
				pathRewrite:{'^/atguigu':''},//重新路径-正则,匹配所有以atguigu开头的
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
				pathRewrite:{'^/demo':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      }
    }
  }
}

扩展用法:

module.exports = {
    devServer:{
        host:'localhost',//访问主机
        port:8080,//端口
        proxy:{//代理-很重要
            '/api' :{
                target:'http://mall-pre.springboot.cn',//访问的接口
                changeOrigin:true,//是否将主机头的原点设置为目标url位置
                pathRewrite:{//转发地址
                    '/api':''//添加路径的时候,把/api转为空,会把api后面的地址当作真实地址,每个接口都会含/api
                }
            },
        }
    },
    // publicPath:'/app',//打包和预览的时候或者,子路径多出一个地址拼接/app
    outputDir:'dest',//整个环境打包完之后的输出路径原来是默认是dist   现在是dest文件
    // indexPath:'index2.html',//单页面的文件名
    lintOnSave:false, //关闭esli语法检查
    productionSourceMap:false,
    chainWebpack:(config)=>{//按需加载
        config.plugins.delete('prefetch')
    }
 
}

二、在react项目中

react17.x

1、方法一:在package.json中加:

例子代理的接口为:http://localhost:5000;

"proxy":"http://localhost:5000"

方法二,多个代理:

在src路径下,创建setupProxy.js文件

 
const proxy = require('http-proxy-middleware');
// 这个玩意不用下,react里自己带了
 
module.exports = function(app) {
    app.use(
        proxy('/api1', {  // 发送请求的时候 react会自动去找这个api1,匹配这个路径,然后去发送对的请求
            target: 'http://localhost:5000',
            changeOrigin: true, //控制服务器接收到的请求头中host字段的值
            pathRewrite: {'^/api1': ''} // 跟上面匹配,这个api1只是找这个路径用的,实际接口中没有api1,所以找个目标地址后,要把api1给替换成空
        }),
        // changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
        // changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:3000
        // 注意!!注意!!注意!! changeOrigin默认值为false,需要我们自己动手把changeOrigin值设为true
        proxy('/api2', {
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite: {'^/api2': ''}
        }),
    )
}
 

二、在react18中基本上和react17.x一样,就在多个代理上有一点点区别;

在src路径下,创建setupProxy.js文件:

const { createProxyMiddleware } = require('http-proxy-middleware')
 
module.exports = function (app) {
    app.use(
        createProxyMiddleware('/api1', { 
            target: 'http://localhost:5000',
            changeOrigin: true,
            pathRewrite: { '^/api1': '' }
        }),
         createProxyMiddleware('/api2', { 
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite: { '^/api2': '' }
        }),
    )
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值