vue项目处理三种跨域问题

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