vue开发之跨域请求,请求头not allowed by Access-Control-Allow-Headers,后端cookie session值取不到(二)
原因:你本地的请求ajax的get和post请求;如果你的请求头内放一些可用验证数据Token的时候就会存在跨域请求这是浏览器所不允许的问题;
方案一:后台的接口请求模式都写成jsonp请求,前端去调用;
特点:是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback
或者开始就定义一个回调方法,参数给服务端,然后服务端返回数据时会将这个callback
参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
缺点:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题,数据传输和服务器安全问题都不能得到保障。
第一种方案我就不解释和运用了缺点太多!
方案二:使用nginx服务重定向请求,实现伪同域请求;
1、mac下载nginx(我只讲mac电脑的nginx安装,window可以去官网);
2、安装Command Line tools
xcode-select --install
3、安装brew命令
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
4、安装nginx
brew install nginx
5、启动nginx
sudo nginx
拓展命令:
关闭nginx方法
1、sudo nginx -s stop
2、先查询占用的进程号:
ps -ef|grep nginx
终端输出:
501 15800 1 0 12:17上午 ?? 0:00.00 nginx: master process /usr/local/Cellar/nginx/1.8.0/bin/nginx -c /usr/local/etc/nginx/nginx.conf
501 15801 15800 0 12:17上午 ?? 0:00.00 nginx: worker process
501 15848 15716 0 12:21上午 ttys000 0:00.00 grep nginx
占用进程号为:15800(记住第一行第二个数字为进程号,回头再解析),然后输入:
kill -QUIT 15800 (从容的停止,即不会立刻停止)
Kill -TERM 15800 (立刻停止)
Kill -INT 15800 (和上面一样,也是立刻停止) 3、实在不知道打开:launchpad->其他->活动监视器->cup搜索nginx->手动结束nginx进程; 打开配置nginx的文件: open /usr/local/etc/nginx
6、打开nginx配置文件,配置nginx.conf文件;
open /usr/local/etc/nginx
代码解释区域:
代码copy区域:
server {
listen 8089;
server_name localhost; location / {
proxy_pass http://192.168.0.112:8080; # 前端静态页面地址
proxy_redirect default;
#设置主机头和客户端真实地址,以便服务器获取客户端真实IP
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
} #location /hr/api/ {
#rewrite ^/(.*)$ /$1 break;
#proxy_pass http://192.168.0.119:8080;
#proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# client_max_body_size 20M;
#} location /edu {
rewrite ^/(.*)$ /$1 break;
proxy_pass http://192.168.0.119:8081;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 20M;
}
}
7、配置vue代码以及请求;
然后
npm run dev 或者yarn dev运行前端vue代码
然后网页访问就正常了!
切记:每次更改完nginx的配置文件nginx.conf都要去重新启动nginx;可以先杀死然后去看看进程号里边有没有服务了,然后重启,也可以直接重启。检查进程号的nginx服务避免进程中出现多个nginx服务。
原理nginx使用的重定向解决了请求的跨域问题,前端页面进入nginx服务然后重定向为后台接口的同域的请求地址;
vue开发之跨域请求,请求头not allowed by Access-Control-Allow-Headers,后端cookie session值取不到(二)的更多相关文章
- Vue开发环境跨域访问
Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下 module.exports = { dev: { // Paths assetsSubD ...
- 【笔记】vue-cli 开发环境中跨域连接后台api(vue-resource 跨域post 请求)
在vue-cli 项目中很多人会用到mock 数据(模拟数据),但是我觉得如果在真实的数据库交互中开发会更有安全感一些,所以查了一下百度很多人推荐的就是: 跨域! 跨域是什么概念?不同的主机名,同主机 ...
- Spring Boot Web应用开发 CORS 跨域请求支持:
Spring Boot Web应用开发 CORS 跨域请求支持: 一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等CORS与JSONP相比 1. JSONP只能实现 ...
- 原创:【ajax | axios跨域简单请求+复杂请求】自定义header头Token请求Laravel5后台【亲测可用】
如标题:我想在ajax的header头增加自定义Token进行跨域api认证并调用,api使用laravel5编写,如何实现? 首先,了解下CORS简单请求和复杂请求. -- CORS简单请求 -- ...
- 跨域post请求实现方案小结--转
[名词解释] 跨域:https://developer.mozilla.org/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript 同源策略 ...
- 004. 前端跨域资源请求: JSONP/CORS/反向代理
1.什么是跨域资源请求? https://www.cnblogs.com/niuli1987/p/10252214.html 同源: 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有 ...
- 跨域 HTTP 请求
如果你需要从不同的服务器(不同域名)上获取数据就需要使用跨域 HTTP 请求. 跨域请求在网页上非常常见.很多网页从不同服务器上载入 CSS, 图片,Js脚本等. 在现代浏览器中,为了数据的安全,所有 ...
- 跨域Ajax请求WebService方法
一.允许跨域Ajax请求,更改如下配置: 在要调用的WebService上面添加特性标签: 二.以如下返回用户信息的WebService方法为例 三.在另一个网站上通过Ajax访问webService ...
- 使用$.getJSON实现跨域ajax请求
jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数.原型如下: jQuery.getJSON( url, [data], [callba ...
随机推荐
- [Quarks PwDump]Hash dump神器
好不好用就不用说了哈 记录下使用方式 也支持导出本地哈希.域控哈希等.配合hashcat神器 奇效. 它目前可以导出 : – Local accounts NT/LM hashes +history ...
- 抛弃Eclipse,投入IDEA 的独孤求败江湖
"工欲善其事,必先利其器" 出处:孔子<论语> 两年了,这是我的 IDEA 实用技巧总结,从前我是一个 Eclipse 忠实用户,直到某天我用上了 IntelliJ I ...
- css涂鸦这样玩
前言 上一次深扒CSS的时候,还说CSS和H5绘制复杂图形很麻烦,看了大神的操作后,感觉茅塞顿开了,哈哈. 就算可能我暂时没有用到的机会,学习一下开发者的设计思路也是受益匪浅呀. 嗯,今天要介绍的是一 ...
- 实践开发:vue框架重点知识分析
一个VUE项目的主树: assets文件夹是放静态资源: components是放组件: router是定义路由相关的配置; view视图: app.vue是一个应用主组件: main.js是入口文件 ...
- insert into select 引起的 "子查询返回的值不止一个。当子查询跟随在**之后,或子查询用作表达式时,这种情况是不允许的"
目录 1.事故现场 1.1 在使用 Insert into Table2 select * from Table1 将表1的数据插入到表2时,报错如下: 1.2 sql 语句 2.推测 3.解决方案 ...
- printf 格式输出代码大全
d,lx,ld,,lu,这几个都是输出32位的hd,hx,hu,这几个都是输出16位数据的,hhd,hhx,hhu,这几个都是输出8位的,lld,ll,llu,llx,这几个都是输出64位的, pri ...
- fenby C语言 P27使用指针
使用指针 p代表地址 *p代表这个地址存放的内容 #include <stdio.h> int main(){ int x=100,y=200,*p1=&x,*p2=&y; ...
- Java设计模式_七大原则
简介 单一职责原则.对类来说,即一个类应该只负责一项职责. 开闭原则.对扩展开放,对修改关闭.在程序需要进行扩展的时候,不能去修改原有代码,使用接口和抽象类实现一个热插拔的效果. 里氏替换原则.任何基 ...
- docker 和 FastDFS上传和下载文件
1,从仓库拉取镜像 sudo docker image pull delron/fastdfs 也可以解压已经打包好的镜像文件 $ sudo docker load -i 文件路径/fastdfs_d ...
- MATLAB实例:聚类初始化方法与数据归一化方法
MATLAB实例:聚类初始化方法与数据归一化方法 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1. 聚类初始化方法:init_methods.m f ...