vue跨域解决的几种方案

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.指定服务的ip host: "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/xxxx target: '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; #设置主机头和客户端真实地址，以便服务器获取客户端真实IP proxy_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 prefer response.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");