Vue+Express 实现跨域方法

本文介绍了解决跨域问题的三种方法:配置代理、使用Node.js的app.all()方法及引入cors包。详细解释了如何在前端项目中设置代理,以及在Node.js后端如何允许特定来源的跨域请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.设置代理:

  -- config/index.js 中,找到dev:{ }, 在这里面设置一个proxyTable

 proxyTable: {
        '/api/':{
            target:'http://210.16.188.194:8090',
            changeOrinin:true,
            pathRewrite:{
                '^/api':''
            }
        }
    },

    参数: 

  target : 写你需要访问的地址 比如说我需要访问的接口是这个下面的某个文件,我只需要写到端口号即可  

  changeOrinin : true  设置为true

  然后就可以使用axios去请求了!      this.$axios.get('api/xxxxxxxxxxxxxxxxx').then(data=>{})....


2.Node app.all()

    代码:

app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
 next(); 
});

3.Node cors

    安装cors包

# npm install cors --save

    代码

const cors = require('cors');  
app.use(cors({  
    origin:['http://localhost:8080'],
    methods:['GET','POST'],
}));

后端NodeJS获取自定义Header

通过req.headers.自定义属性获得自定义的头部数据

前端跨域二次请求

当我们跨域使用自定义Header的时候,前端会发出两次HTTP请求,第一次类型为OPTION,以向后端验证“跨域中哪些Header可以拥有正常访问权限”,然后发出真正的第二次HTTP请求。 


Github:https://github.com/Lil-El/Movie

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值