聊聊前端如何处理跨域的问题

最新推荐文章于 2024-08-14 16:49:42 发布

编程迪

最新推荐文章于 2024-08-14 16:49:42 发布

阅读量143

点赞数 1

本文链接：https://blog.csdn.net/zd1007129657/article/details/116934959

版权

什么是跨域：用浏览器访问一个页面，接口请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同即为跨域。

问题背景：在之前的开发过程当中，都是后端那边处理跨域问题，加个配置项允许跨域就行了，处理起来也比较简单。但是在最近一个项目中，遇到的后端不处理，前端这边刚开始使用的是降低浏览器安全性的办法，但是总感觉不合适，于是就开始了nginx的探索。

nginx下载安装

nginx: download

nginx配置命令在根目录下执行

查看nginx的版本号：nginx -v

启动nginx：start nginx

快速停止或关闭nginx：nginx -s stop

正常停止或关闭nginx：nginx -s quit

配置文件nginx.conf修改重装载命令：nginx -s reload

配置conf文件

server {
        listen       8888;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
            proxy_pass http://api.tushare.pro;
        }

        # 监听静态页面
        location /xixi {
            alias  C:/Users/Admin/Desktop;
            index  smartShares.html;
        }
    }

server {
        listen       8080;
        server_name  localhost;

        # 监听本地已启动的vue项目
        location / {
            root   html;
            index  index.html index.htm;
            proxy_pass http://10.201.234.37:8080;
        }

        # 监听本地已启动项目请求的ip
        location /wms {
            proxy_pass http://10.201.234.187:8080;
        }
    }

vue-cli中如何处理跨域

// 全局搜索proxyTable 并如下配置 之后重启
proxyTable: {
  '/wms': {
    target: "http://10.201.234.187:8080", // 目标地址
    secure: true, // 如果是https接口 需要配置这个参数
    changeOrigin: true, // 是否同源，默认false
    pathRewrite: {}
  },
},
// 配置以后就可以如下方式替换 深究其原理和nginx类似
axios.defaults.baseURL = "http://10.201.234.187:8080/wms"; // 原来的请求地址
axios.defaults.baseURL = "/wms"; // 现在的请求地址 对于有统一前缀的需要提出来