Vue+Express 实现跨域方法

素颜马尾好姑娘i 2022-04-05 21:07 356阅读 0赞

# 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][https_github.com_Lil-El_Movie]

[https_github.com_Lil-El_Movie]: https://github.com/Lil-El/Movie

发表评论取消回复

表情：

评论列表（有 0 条评论，356人围观）

还没有评论，来说两句吧...

相关阅读

相关跨域解决方法

一、什么是跨域跨域问题是由浏览器的同源策略引起的。同源策略是一种安全策略，它限制了一个页面从另一个源加载任何资源，包括脚本、样式、图片、iframe等。同源是指协议、域

红太狼/ 2023年10月12日 21:04/ 0 赞/ 54 阅读

相关 laravel实现跨域简单粗暴方法

直接在/public/index.php中写下面内容 header('Access-Control-Allow-Origin: '); header('Acc

怼烎@/ 2023年07月13日 03:20/ 0 赞/ 34 阅读

相关原生js实现jsonp跨域 jquery 实现跨域 vue实现跨域请求

原生js实现jsonp跨域 jquery 实现jsonp跨域 vue实现http跨域请求在不同域名下请求数据就会产生跨域问题同源：同一协议，同一域名，同一端口号。

待我称王封你为后i/ 2023年06月22日 04:29/ 0 赞/ 44 阅读

相关 axios实现cros跨域 fetch实现jsonp跨域

axios实现cros跨域 > 1. 网站 [www.npmjs.com][],能搜索到插件安装及使用方式 > 2. axios最终返回的是promise对象 > 3

怼烎@/ 2023年06月18日 10:54/ 0 赞/ 62 阅读

相关什么是跨域？跨域的解决方法？

什么是跨域？要了解跨域，先要说说同源策略。同源策略是由 Netscape 公司提出的一个著名的安全策略，所有支持 JavaScript 的浏览器都会使用这个策略。所谓

r囧r小猫/ 2023年05月31日 03:25/ 0 赞/ 53 阅读

相关什么是跨域？跨域解决方法（重中之重）

跨域以前也不懂，但是慢慢就会理解了，咱们学习的前端大概一部分就是网站域名交互一、为什么会出现跨域问题出于浏览器的同源策略限制。同源策略（Same

秒速五厘米/ 2023年01月02日 11:22/ 0 赞/ 169 阅读

相关什么是跨域？跨域解决方法

一.为什么会出现跨域问题出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器

小咪咪/ 2022年10月16日 02:56/ 0 赞/ 364 阅读

相关跨域方法总结

最近面试问的挺多的一个问题，就是JavaScript的跨域问题。在这里，对跨域的一些方法做个总结。由于浏览器的同源策略，不同域名、不同端口、不同协议都会构成跨域；但在实际的业务

快来打我*/ 2022年07月14日 08:07/ 0 赞/ 261 阅读

相关 ajax跨域方法

nginx url rewrite 在服务器端安装nginx服务，将H5前端的访问路径和java后端的访问路径放在一个域名下，由nginx根据url请求路径进行转发:

阳光穿透心脏的1/2处/ 2022年07月14日 00:30/ 0 赞/ 243 阅读

相关 Vue+Express 实现跨域方法

1.设置代理： -- config／index.js 中，找到dev:\{ \}, 在这里面设置一个proxyTable proxyTable: {

素颜马尾好姑娘i/ 2022年04月05日 21:07/ 0 赞/ 357 阅读