Vue+Express 实现跨域方法

最新推荐文章于 2023-11-03 15:18:01 发布

MINO吖

最新推荐文章于 2023-11-03 15:18:01 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： # Vue Node 文章标签：跨域 vue express node

本文链接：https://blog.youkuaiyun.com/qq_36157085/article/details/84894514

Vue 同时被 2 个专栏收录

36 篇文章

订阅专栏

Node

13 篇文章

订阅专栏

本文介绍了解决跨域问题的三种方法：配置代理、使用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'],
}));

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

前端跨域二次请求

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

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