首页 > 系统相关 >nginx反向代理,解决vue项目跨域问题

nginx反向代理,解决vue项目跨域问题

时间:2023-01-11 18:03:00浏览次数:51  
标签:www set 跨域 header api nginx vue proxy https


 nginx的配置: 

 把 /api 转到 另一个域名下

#PROXY-START/api
location /api
{
expires 12h;
if ($request_uri ~* "(php|jsp|cgi|asp|aspx)")
{
expires 0;
}
proxy_pass https://www.c3w.com.cn;
proxy_set_header Host https://www.c3w.com.cn;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;

#持久化连接相关配置
#proxy_connect_timeout 30s;
#proxy_read_timeout 86400s;
#proxy_send_timeout 30s;
#proxy_http_version 1.1;
#proxy_set_header Upgrade $http_upgrade;
#proxy_set_header Connection "upgrade";

add_header X-Cache $upstream_cache_status;


}

#PROXY-END/api

VUE的配置:

// 代理跨域
proxyTable: {
"/api": {
target: "https://www.c3w.cc/api",// 前端的域名
secure: true, //如果是https接口,需要配置这个参数
changeOrigin: true, //如果接口跨域,需要进行这个参数配置
pathRewrite: {
"^/api" : ""
}
}
},

 

标签:www,set,跨域,header,api,nginx,vue,proxy,https
From: https://blog.51cto.com/jing/6002495

相关文章

  • ref 输入框自动获取焦点 input fcous vue2
    环境:vue2当我们的输入框不是一打开页面就显示出来,而是通过点击某个按钮显示或页面跳转时,输入框自动获取焦点的方法如下:输入框添加属性ref=“newMethodTitle”在点......
  • VUE项目的API项目的nginx配置
    #PROXY-START/apilocation/api{expires12h;if($request_uri~*"(php|jsp|cgi|asp|aspx)"){expi......
  • sortablejs 列表拖拽排序,js vue2,解决拖拽排序乱序问题
    功能:在列表中,需要给列表进行拖拽排序,并实时保存拖拽后的列表书序实现;运用js中的sortablejs库环境:vue2中文网:http://www.sortablejs.com在首页中下拉可以看到有多个......
  • 26、electron 跨域报:has been blocked by CORS policy: The request client is not a
    在electron里面运行的页面,异常请求的时候,发生跨域问题。在普通浏览器上正常运行。解决办法:在webPreferences上添加webSecurity:falsewebPreferences:{web......
  • nginx配置
    #Formoreinformationonconfiguration,see#*OfficialEnglishDocumentation:http://nginx.org/en/docs/#*OfficialRussianDocumentation:http://ngin......
  • Vue之txt文件上传功能
    Vue之文件上传功能需求:智能中医项目需要涉及一个数据上传功能,上传一个txt文件格式:以表单形式上交给后端同学,Id读取表格行内id即可展示如下:界面实现:<el-dialog title......
  • vue el-date-picker多选日期时间时,支持时间排序
    需求背景:当el-date-picker可以多选日期时,时间的顺序是按照选择的顺序来的,体验不是很好。需要在选时间的同时进行时间排序 解决方案:使用watch监听v-model绑定的值的变......
  • Vue多选问卷设计
    需求:智能中医项目需要在医院端设计一个填写多选的问卷模块,医生根据选项提示填写患者相关信息,用来存储中医中五脏六腑的信息。提交的问卷,可以在展示页面进行浏览,浏览已勾选......
  • nginx 如何处理https 协议访问http 协议图片的问题
    1.先在后端转换成代理路径 2.然后再配置nginx,转换成http路径,实现访问    ......
  • ajax通过jsonp解决跨域问题
    直接上代码:前端:<scriptsrc="./jquery-1.11.2.min.js"></script><script>$(function(){$('#btn').click(function(){varurl="http:......