vue项目中常用解决跨域的方法总结(CORS和Proxy)

目录
  • 一、什么是跨域？
  • 二、如何解决跨域？
  • 总结

一、什么是跨域？

跨域问题的出现是因为浏览器的同源策略问题。所谓同源就是必须有以下三个相同点：协议相同、主机相同、端口相同。如果其中有一项不同，即出现非同源请求，就会产生跨域。当我们请求一个接口的时候，出现如：Access-Control-Allow-Origin 字眼的时候说明请求跨域了

二、如何解决跨域？

跨域的解决方案：

jsonp
cors
Node中间件代理(两次跨域) 即 Proxy
nginx反向代理 CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案
JSONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
不管是Node中间件代理还是nginx反向代理，主要是通过同源策略对服务器不加限制。
日常工作中，用得比较多的跨域方案是cors和nginx反向代理

主要解释CROS和Proxy两种方式

1、CROS

  • CROS是 Cross-Origin Resource Sharing的缩写，翻译过来就是跨域资源共享的意思。它由一系列传输的HTTP头组成，这些HTTP头会决定浏览器是否阻止前端 JavaScript代码获取跨域请求的响应。
  • CORS的实现比较简单方便，只需要增加一些 HTTP头，让服务器能声明允许的访问来源。只要后端实现了 CROS就实现了跨域。

2、Proxy（代理）

  • 通过启动本地服务器进行代理转发目标服务器。而跨域只针对于浏览器，对于node服务发出的请求是不会出来跨域的，从而解决了跨域的问题。
  • 在vue.config.js文件

1、可配置多个不同的proxy

devServer: {
    proxy: {
      '/api': {//代理标识，一般是每个接口前的相同部分
        target: 'http://23.15.11.15:8000', // 这里写的是访问接口的域名和端口号
        changeOrigin: true, // 允许跨域请求
        pathRewrite: { // 重写路径，替换请求地址中的指定路径
          '^/api': '/user'
        }
      },
      '/login': {
		 target: 'http://23.15.11.15:8000',
		 changeOrigin: true,
		 pathRewrite:{
		   '^/login':''  //替换成空
		 }
	   }
    }
  },

示例：

  • http://localhost:8080/api/test --> http://23.15.11.15:8000/user/test
  • http://localhost:8080/login/index–> http://23.15.11.15:8000/index

2、对所有的接口都代理

devServer: {
 proxy: 'http:/www.ljc.com'
}

示例：

  • http://localhost:8080/api/test --> http://www.ljc.com/api/test
  • http://localhost:8080/login/index–> http://www.ljc.com/login/index

总结

到此这篇关于vue项目中常用解决跨域的文章就介绍到这了,更多相关vue解决跨域方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue代理模式解决跨域详解

    目录 跨域是什么 解决跨域 1.在vue.config.js中这样写: 2.创建一个http.ts(我是ts的,你也可以js): 3.创建一个request.ts: 4.这样使用: 跨域是什么 简单的讲就是你在一个地方使用另一个地方的资源,被浏览器给挡下来了,不让不用!当然,它挡下来是有自己理由的:为了安全(╬▔皿▔)╯. 解决跨域 我是用vue开发的,就vue代理模式解决跨域说明一下. 1.在vue.config.js中这样写: let devProxy = {   //获取ip信息   '/

  • vue3解决跨域问题详细代码亲测有效

    目录 vue3解决跨域问题详细代码亲测有效 关于解决vue3的跨域问题 项目场景: 原因分析: 解决方案: vue3解决跨域问题详细代码亲测有效 1.在vue.config.js中 放入以下代码: module.exports = { devServer: { proxy: { '/api': { target: 'http://api.tubecoin.org', //这里填入你要请求的接口的前缀 ws: true, //代理websocked changeOrigin: true, //虚拟

  • vant/vue跨域请求解决方案

    因为后端给的接口不是本地的接口,所以需要跨域来获取接口数据 在vue.config.js中对其进行配置 devServer: { host: 'localhost', port: 3030, // 端口 https: false, proxy: { // 配置跨域 '/api': { target: 'http://xx.xx.xx.xxx', // 代理的接口域名以及端口号: ws: true, // 支持ws协议:websocket的缩写: changeOrigin: true, // 是否

  • 解决Vue2跨域报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK

    目录 请求场景: 跨域报错信息 Vue2跨域问题报错截图 解决方法 解决方法解析: 总结 请求场景: 当前页面URL:http://127.0.0.1:8000/testcase 跳转请求页面URL:http://127.0.0.1:5000/testcase_orm 使用axios请求 时 页面提示跨域报错 跨域报错信息 Access to XMLHttpRequest at ‘http://127.0.0.1:5000/testcase_orm’ fromorigin ‘http://loc

  • vue中proxy代理的用法(解决跨域问题)

    目录 声明 1. 首先我们应该知道 2. 跨域,什么是跨域呢? 问题 跨域的解决方案 代理服务器是如何解决跨域的? proxy配置 以vue cli3.0为例 总结 声明 1. 首先我们应该知道 前端axios在本地发送的请求如果你不把路径写全,它都是会默认加上自己项目所在的端口,就比如说: axios.get('/login') axios.get('/hello') 当我点击发送按钮之后,以上两行代码实际为: http://localhost:8080/login http://localh

  • VUE跨域详解以及常用解决跨域的方法

    VUE跨域详解以及常用解决跨域的方法

    目录 跨域 解决跨域常用方法: 一.VUE中常用proxy来解决跨域问题 二.JSONP解决跨域 三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上 四.iframe实现跨域 总结 跨域 当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时,那说明跨域了. 跨域是因为浏览器的同源策略所导致,同源策略(Same origin policy)是一种约定,它是浏览器最核

  • vue使用vite配置跨域以及环境配置详解

    vue使用vite配置跨域以及环境配置详解

    目录 如何配置跨域,代理域名 区分开发环境和生产环境,以及预发布环境 可以做什么事 补充:解决跨域常用方法 一.VUE中常用proxy来解决跨域问题 二.JSONP解决跨域 三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上 四.iframe实现跨域 总结 如何配置跨域,代理域名 不管使用什么脚手架,配置代理都是绕不开的话题,下面是vite的代理 server: { proxy: { '/api'

  • vue项目中常用解决跨域的方法总结(CORS和Proxy)

    目录 一.什么是跨域? 二.如何解决跨域? 总结 一.什么是跨域? 跨域问题的出现是因为浏览器的同源策略问题.所谓同源就是必须有以下三个相同点:协议相同.主机相同.端口相同.如果其中有一项不同,即出现非同源请求,就会产生跨域.当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了 二.如何解决跨域? 跨域的解决方案: jsonpcorsNode中间件代理(两次跨域) 即 Proxynginx反向代理 CORS支持所有类型的HTTP请求,

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

  • 在vue项目中,使用axios跨域处理

    跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无法自己独立的搭建一个服务器,所以就变成了一个尴尬的事情 当然,有很多的虚拟服务器,能够解决跨域问题,他们的实质都是通过后台取与后台沟通,从而委婉的解决跨域问题正好,webpack正有这种功能,所以vue-cli也是有解决跨域的能力 当然,不可能我们直接发送ajax就成功,对吧,我们肯定要修改配置文件 代码: dev: { env: require('./dev.env'), port: 8080, a

  • Nginx解决vue项目服务器部署及跨域访问后端详解

    Nginx解决vue项目服务器部署及跨域访问后端详解

    目录 准备 1.前端代码注意事项: 2.虚拟机的Nginx配置关键点: 测试 总结 准备 (1)首先是一个Vue项目. (2)其次准备好服务器(在这里我是用虚拟机VMware). (3)准备好一个SpringBoot后端代码. (4)服务器上必须安装Nginx. 1.前端代码注意事项: (1)在这里我是用vuecli3脚手架创建的vue项目的,所以项目创建完毕之后是没有vue.config.js的. 其实这个文件的创建是为了本地测试解决前后端跨域问题的,但是在打包项目的时候需要把这里关于跨域的代

  • vue中axios解决跨域问题和拦截器的使用方法

    vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

  • 如何在vue里面优雅的解决跨域(路由冲突问题)

    如何在vue里面优雅的解决跨域,路由冲突问题 当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: { '/goods/*': { target: 'http://localhost:3000' }, '/users/*': { target: 'http://localhost:3000' } }, 这种配置方式在一定程度上解决了跨域问题,但是会带来一些问题, 比如我们的vue 路由 也命名为 goods,这时候就会产生了冲突, 如果项目中接口很多,都在这里配置是很麻烦的,也

  • Vue项目中常用的实用技巧汇总

    目录 前言 1. 使用 $attrs 和 $listeners 进行多层级的数据和事件传递 2. 实现数据的双向绑定,方便维护数据 使用 .sync 实现 Prop 的"双向绑定" 使用 model 选项 3. 使用 Mixins 4. 使用动态组件去懒加载组件 5. 在组件作用域内的 CSS 中使用 ::v-deep  修改组件样式 6. 使用装饰器优化代码 7. 利用 require.context 去获取项目目录信息 总结 引用 前言 在 Vue 项目开发中,很容易产生一些问题,

  • React项目中fetch实现跨域接收传递session的解决方案

    React项目中fetch实现跨域接收传递session的解决方案

    本次项目使用了react框架,同时使用fetch取代ajax作为获取接口数据的交互方法.本以为过程中应该不会有什么磕绊,没想到遇到了session丢失这个让人甚是苦恼的问题.期间本想换种方法来对接接口,但转念一想如果每次遇到问题都选择逃避,那么以后的编码之路只能越走越窄,所以还是决定坚持下去.好在经过一整天的摸索,总算是成功攻克了这个难关,下面就对这次问题的解决做个总结. 首先,为什么会出现postman接口调试正常而程序里fetch调用却出现session丢失的问题? 回顾fetch本身的特性

  • 在vue项目中promise解决回调地狱和并发请求的问题

    场景需求: 需要同时请求5个接口 都请求成功后执行下一步操作 解决方法: 定义一个变量i=5,请求成功一个接口,让i–,直到i=0时执行下一个操作,否则不执行 axios.all 并发请求,.then(axios.spread(function(callback1, callback2)){}) promise.all 并发请求,.then(function([callback1, callback2]){}) 1.回调地狱: 函数作为参数层层嵌套 代替的为.then的链式操作 2.promis

随机推荐