Vue中的跨域问题

2023-04-05 17:05| 来源: 网络整理| 查看: 265

1. 为什么会出现跨域

基于浏览器的同源策略（协议，域名，端口----缺一不可），不是同源，就是跨域

2. jsonp方案

当我们正常地请求一个JSON数据的时候，服务端返回的是一串 JSON类型的数据，而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get示例

function success(data) { console.log('JSONP响应回来的数据'); console.log(data); } //这里返回的是一个函数调用复制代码 3. proxy代理（推荐） publicPath: './', runtimeCompiler: true, // devServer:{ // port:83, // proxy:{ // '/api':{ // target:"http://localhost:8086", // changOrigin: true, //允许跨域 // pathRewrite:{ // '^/api':'' //重写路径 // } // } // } // } } axios.defaults.baseURL = '/api' 复制代码 4. nginx反向代理

nginx 反向代理服务监听 192.168.17.129的80端口，如果有请求过来，则转到proxy_pass配置的对应服务器上，仅此 ;在location下，同时配置root和proxy_pass选项时，两个选项只会二选一执行此处不能配置https反向代理

server { listen 80; server_name 192.168.17.129; location / { root html; index index.html index.htm; proxy_pass http://127.0.0.1:8080 } } 复制代码

【本文地址】

公司简介

联系我们