vue跨域解决的几种方案

一、开发环境解决跨域方法

平时使用vue开发的时候，大多会使用vue-cli搭建项目，在vue-cli搭建的项目中有一个配置文件vue.config.js,可以在该文件中进行相应的配置解决开发环境的跨域问题。
第一步设置公共url

api/index.js

import axios from 'axios'
import router from '@/router/index.js'
import store from '@/store/index.js'
// 创建一个axios实例
var instance = axios.create({baseURL: "/api",
})// 请求拦截器
instance.interceptors.request.use(function (config) {config.headers['E_Token'] = store.state.user.E_Token;return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
})// 响应拦截
instance.interceptors.response.use(function (config) {if(config.data.retCode !=0){// 处理后台异常return false;}return config;
}, function (error) {return Promise.reject(error)
})export default function (method, url, data = null) {method = method.toLowerCase();if (method == 'post') {return instance.post(url, data)} else if (method == 'get') {return instance.get(url, data)} else if (method == 'delete') {return instance.delete(url, data)} else if (method == 'put') {return instance.put(url, data)} else {console.error('未知的method' + method)return false}
}

api/modules/pagesApi.js

import req from '../index'//用户注册接口
export const register =(params)=>{return req("post", '/user/register', params)
}//用户登录接口
export const login =(params)=>{return req("post", '/user/login', params)
}//Model列表及分页
export const getFormList =(params)=>{return req("post", '/model/getFormList', params)
}//查看详情
export const queryModel =(params)=>{return req("get", '/model/queryModel/'+params.id,{})
}//Model删除接口
export const deleteModel =(params)=>{return req("delete", '/model/deleteModel/'+params.id,{})
}//Model新增
export const insertModel =(params)=>{return req("post", '/model/insertModel', params)
}

通过拦截器我们可以更加容易的与后台进行交互，同时简洁了代码，使得管理更加容易，我们创建拦截器的时候可以指定baseUrl，这里我指定的是**"/api",因为接下来我们需要对"/api"进行拦截配置，目的是凡是以"/api"开头的请求url都会将url中的"/api"**的前面添加上我们指定的内容。
例如：

'/api/user/login'     替换成   'http://119.20.224.137:8201/api/user/login'

vue.config.js

devServer: {// 1.指定服务的iphost: "192.168.0.128",// 2.指定服务的端口port: 3000,open: true,overlay: {warnings: false,errors: true},// 3.开发环境进行http的代理proxy: {// 匹配 url 路径的开头'/api': {// 1.路劲只要是/api开头的url都代理到下面这个网站。// 例如：'/api/xxxx' 会代理到 https://119.20.224.137/api/xxxxtarget: 'http://119.20.224.137:8201',changeOrigin: true,pathRewrite: { '^/api': '/api/' }}}},

二、生产环境解决跨域方法

配置nginx代理

使用nginx反向代理，在配置文件nginx.conf中找到server{}对象，更改项目地址root和配置代理地址proxy_pass，这个方法适合前端静态文件使用：

location / {root   D:/browseClient/dist;  #自己的前端项目地址index  index.html index.htm;
}
#解决跨域
location /api {                                # 自定义nginx接口前缀proxy_pass   http://127.0.0.1:3000;            # 后台api接口地址proxy_redirect default;      #设置主机头和客户端真实地址，以便服务器获取客户端真实IPproxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

三，后端处理

 response.setHeader("Access-Control-Allow-Origin", "*");//* or origin as u preferresponse.setHeader("Access-Control-Allow-Credentials", "true");response.setHeader("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Headers", "content-type, authorization");

vue跨域解决的几种方案相关推荐

[转] js前端解决跨域问题的8种方案（最新最全）
[转] js前端解决跨域问题的8种方案(最新最全) 参考文章: (1)[转] js前端解决跨域问题的8种方案(最新最全) (2)https://www.cnblogs.com/chris-oil/p/ ...
CORS了解与VUE跨域解决
1.CORS了解 CORS通信得关键地方就是服务器,只要服务器实现了CORS接口,就可以实现跨域通信浏览器将CORS请求分为两大类:简单请求.非简单请求简单请求基本介绍同时满足以下条件就是简单 ...
前端解决跨域问题的8种方案（最新最全）
.同源策略如下: URL 说明是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下允许 http://www.a.com/lab/a.j ...
Spring Boot 解决跨域问题的 3 种方案！
以下文章来源方志朋的博客,回复"666"获面试宝典作者:telami 来源:www.telami.cn/2019/springboot-resolve-cors/ 前后端分离大势 ...
Spring Boot 解决跨域问题的 3 种方案
来源 | r6d.cn/XTrB 前后端分离大势所趋,跨域问题更是老生常谈,随便用标题去google或百度一下,能搜出一大片解决方案,那么为啥又要写一遍呢,不急往下看. 问题背景: Same Orig ...
前端解决跨域问题的8种方案
2019独角兽企业重金招聘Python工程师标准>>> 1.同源策略如下: URL 说明是否允许通信 http://www.a.com/a.js http://www.a.com/ ...
跨域解决的三种方法、四种请求方式
同源: 同源:ajax请求的url和网页所在的url具有相同的协议,域名,ip和端口同源策略:为了数据安全,浏览器禁止通过ajax请求读取非同源的数据(注意:同源策略的两个关键点:1,浏览器 2,a ...
vue跨域解决及打包
打包之前需要修改如下配置文件: 配置文件一:build>>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件( ...
Vue 跨域下载或读取文件
image.png 下载文件 export async function download(file_url, file_name) {let res = await Axios({method: & ...

vue跨域解决的几种方案

vue跨域解决的几种方案

一、开发环境解决跨域方法

api/index.js

api/modules/pagesApi.js

vue.config.js

二、生产环境解决跨域方法

三，后端处理

vue跨域解决的几种方案相关推荐

最新文章

热门文章