欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue项目处理三种跨域问题

程序员文章站 2022-06-18 15:31:19
1.为什么要跨域跨域是浏览器为了安全而做出的限制策略浏览器请求必须遵循同源策略:同域名,同端口,同协议。2.跨域种类1.CORS跨域2.JSONP跨域3.代理跨域CORS跨域:cors跨域是服务端设置,前端直接调用,也就是说后台允许前端某个站点进行访问。import axios from 'axios'let url = '你的api' axios.get(url).then(()=>{ })JSONP跨域:前端适配,后端配合,访...

1.为什么要跨域

	跨域是浏览器为了安全而做出的限制策略
	浏览器请求必须遵循同源策略:同域名,同端口,同协议。

2.跨域种类

	1.CORS跨域
	2.JSONP跨域
	3.代理跨域

CORS跨域:

cors跨域是服务端设置,前端直接调用,也就是说后台允许前端某个站点进行访问。
import axios from 'axios'
	let url = '你的api'
  	axios.get(url).then(()=>{
     
     })

JSONP跨域:

前端适配,后端配合,访问被限制的api它不是一个请求,而是一个插件。是一个js函数。
import jsonp from 'jsonp'
	 jsonp(url,(err,res)=>{
        let result = res;
        this.data = result;
      })

接口代理:

通过修改nginx服务器配置来实现,前端修改后端不动
在vue.config,js文件中进行配置

这是vue.config文件


module.exports = {
  lintOnSave: false,
  devServer:{
    host:'localhost',
    port:8080,
    proxy:{//代理
      '/api':{//在请求接口时,在接口前面加一个/api,遇到/api后会吧url当成真实地址,拼接到target上,完成请求
        target:'https://www.imooc.com',
        changeOrigin:true,
        pathRewrite:{//把/api读取为空
          '/api':' '
        }
      }
    }
  }

}
let url = "/api/activity/servicetime"
     jsonp(url,(err,res)=>{
        let result = res;
        this.data = result;
      })

本文地址:https://blog.csdn.net/weixin_43899875/article/details/108130214