Vue2解决跨域的3种方式

这篇具有很好参考价值的文章主要介绍了Vue2解决跨域的3种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 跨域的三种方式

1.1 jsonp

以前的技术,通过<script>标签跨域请求,服务器端返回的是符合js语法的函数调用,函数的形参即数据

1.2 CORS

跨域资源共享,需要服务器端进行配置

//express中配置cors
const cors = require("cors")
app.use(cors())

1.3  服务器代理

(1) 通过在vue.config.js中配置proxy实现跨域 (开发阶段)

(2) 通过Nginx服务器代理实现跨域 (生产阶段)

## 2. Nginx服务器代理

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器
可以实现vue项目中的跨域请求

我们真实的服务器不应该直接暴露到公网上去,否则更加容易泄露服务器的信息,也更加容易受到攻击。一个比较“平民化”的方案是使用Nginx反向代理它。

一台具有公网的Nginx服务器可以代理和它能进行内网通信的真实的服务器。让我们的服务器不直接对外暴露,增加其抗风险能力。

2.1 下载

http://nginx.org/en/download.html|  nginx/Windows-1.10.3 |

2.2 nginx在windows系统中如何启动、重启、停止

在nginx文件夹中打开cmd

(如果是powershell不能直接使用cmd命令:  输入cmd回车即可)

//基本命令操作:
nginx -v //查看nginx的版本号
start nginx  //启动nginx
nginx -s stop //快速停止或关闭nginx
nginx -s quit //正常停止或关闭nginx
nginx -s reload //配置文件nginx.conf修改重装载命令

2.3 启动nginx

start nginx
在地址栏输入: localhost:80即可打开默认首页

2.4 修改前端vue项目中的url

在config.js中修改baseURL

//原设置
baseURL: 'http://localhost:3000'
//修改为
baseURL: '/api'

2.5 打包vue项目

npm run build
把dist文件夹放在nginx根目录

2.6 修改nginx的 conf/nginx.conf

server {
      listen       80;  #nginx服务器端口
      server_name  localhost;  #nginx域名

      location / {
          root   dist; #首页所在文件夹
          index  index.html index.htm;
      }

      location /api/ {
         proxy_pass   http://127.0.0.1:3000; # 将/api/开头的url转向该域名
         rewrite "^/api/(.*)$" /$1 break; 最终url中去掉/api前缀
      }
  }

2.7 重载nginx,浏览

nginx -s reload

3000端口的服务器要打开

2.8 vue中history模式的服务器端配置

vue中设置history模式

const router = new VueRouter({
  base: process.env.BASE_URL,
  routes,
  mode: 'history'
})

修改nginx的conf/nginx.conf

try_files $uri $uri/ /index.html;

代码如下:文章来源地址https://www.toymoban.com/news/detail-442673.html

server {
    listen       80;  #nginx服务器端口
    server_name  localhost;  #nginx域名

    location / {
        root   dist; #首页所在文件夹
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
       proxy_pass   http://127.0.0.1:3000; # 将/api/开头的url转向该域名
       rewrite "^/api/(.*)$" /$1 break; //最终url中去掉/api前缀
    }
}

到了这里,关于Vue2解决跨域的3种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue学习笔记】跨域的六种解决方案

    @TOC 跨域问题指的是在浏览器端,当一个网页的脚本(如JavaScript)向另一个域名的网站发起请求时,如果两个网站的域名不一致,就会出现跨域问题。由于浏览器的同源策略(Same Origin Policy),默认情况下,脚本只能访问同一个域名下的资源,不能访问其他域名下的资源。

    2024年02月10日
    浏览(53)
  • 在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题

    uniapp项目在浏览器运行,有可能调用某些接口会出现跨域问题,报错如下图所示: 存在跨域问题的原因是因为浏览器的同源策略,也就是说前端无法直接发起跨域请求。同源策略是一个基础的安全策略,但是这也会给uniapp/Vue开发者在部署时带来一定的麻烦。一般来说,浏览

    2024年01月21日
    浏览(59)
  • 实现跨域的几种方式

    前后端的分离导致了跨域的产生  跨域的三要素:协议 域名 端口 三者有一个不同即产生跨域 例如: http ://www.csdn.com https ://www.csdn.com 由于协议不同,端口不同而产生跨域 注:http的默认端口80,https的默认端口443 跨域的解决方案 前端:webpack proxy,jsonp,ngix反向代理,webpac

    2024年02月13日
    浏览(47)
  • springboot实现跨域的五种方式

    出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。 同源策略 同源策略会

    2024年02月05日
    浏览(52)
  • SpringBoot 实现跨域的六种方式

    目录 1.通过SpringSecurity方式配置 2.使用Spring提供的CorsFilter注入Bean(推荐) 3.使用注解@CrossOrigin注解(繁琐) 4.通过ResponseBodyAdvice 实现跨域 5.通过HttpServletResponse设置跨域 6.通过WebMvcConfigurer 实现跨域 与第5类似

    2024年02月14日
    浏览(49)
  • jsonp解决跨域

    1、Ajax直接请求普通文件存在跨域无权限访问的问题,不管是静态页面、动态页面、web服务,只要是跨域请求,一律不准。 2、不过我们发现,web页面调用js文件则不受跨域的影响(不仅如此,我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力,比如script、img、

    2024年02月16日
    浏览(40)
  • 【SpringBoot系列】实现跨域的几种方式

    前言 在Web开发中,跨域是一个常见的问题。由于浏览器的同源策略,一个Web应用程序只能访问与其自身同源(即,相同协议、主机和端口)的资源。 这种策略的存在是为了保护用户的安全,防止恶意网站读取或修改用户的数据。 然而,现代Web应用程序经常需要访问不同源的

    2024年02月01日
    浏览(55)
  • vue2跨域问题解决[前端方法]

    前端项目中常见的跨域报错如下: Access to XMLHttpRequest at \\\'https://xxx.com/ms/\\\' from origin \\\'http://10.23.30.135:8080\\\' has been blocked by CORS policy: No \\\'Access-Control-Allow-Origin\\\' header is present on the requested resource. 针对这种跨域的报错我们可以通过后端设置 Access-Control-Allow-Origin 的header来解决,但一般

    2024年02月08日
    浏览(53)
  • Vue2怎么解决跨域问题

    1.跨域报错: 项目目录:  第一步:在vue项目中的跟目录下创建一个 vue.config.js ,文件名是固定的,名字不一样会报错,如果有这个文件就不用新建 第二步: 在vue.config.js里边直接复制粘贴下面这串代码: 粘贴后,vue.config.js代码如下: 第三步:如果你使用的是axios来请求数据

    2024年02月12日
    浏览(86)
  • java篇-Springboot解决跨域问题的三种方式

    第一种:添加 @CrossOrigin 注解 在Controller层对应的方法上添加@CrossOrigin或者类上添加@CrossOrigin   第二种:添加CORS过滤器 新建配置类CorsConfig,创建 CorsFilter 过滤器,允许跨域  第三种:实现 WebMvcConfigurer ,重写 addCorsMappings 方法 全局配置有可能出现跨域失败的情况,改为过滤

    2024年04月23日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包