解决跨域问题

假设 前端网址：http:xx.xx.xx.xx:8022 后端网址http:xx.xx.xx.xx:8023

当通过http:xx.xx.xx.xx:8022网址去请求http:xx.xx.xx.xx:8023服务器接口时会产生跨域问题 报错问题如下

什么叫跨域？

违背同源策略就是跨域（同源策略指的是协议、域名、端口号一致）

当通过前端网址去请求服务端接口时，只要有协议、域名或者端口号三者之一不一致就会出现跨域问题

解决跨域的方法

方法一：jsonp（基本不使用）

是利用<script>标签没有跨域限制的特性，通过<script>标签的src属性发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。但JSONP只能处理GET请求，且通过URL携带参数容易被劫持，不安全。

方法二：配置代理

本地环境配置：

在项目中使用最多的就是通过proxy配置代理来解决跨域的问题

1. 在vue.config.js中添加以下代码（当一个项目中需要使用到多个后端服务器地址时，代理可以写多个）

 server: {
    proxy: {
      "/api": {
        target: "http://xx.xx.xx.xx:8023",//后端地址1
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
      "/aapi": {
        target: "http://xx.xx.xx.xx:8024,//后端地址2
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/aapi/, ""),
      },
    },
  },

2. 当需要调后端地址1的接口时就只需要用/api取代http://xx.xx.xx.xx:8023就可以了

例如：

原先请求接口路径——后端地址+接口路径

axios.get('http://xx.xx.xx.xx:8023/getinfo').then(res=>{}).catch(error=>{})

换成——前端地址+/api+接口路径（就不会有跨域问题了，通过代理之后会自动将 前端地址+/api 转换成后端地址，因为代理服务器与服务器之间不会存在跨域问题）

axios.get('http://xx.xx.xx.xx:8022/api/getinfo').then(res=>{}).catch(error=>{})

一般在项目中不会直接通过上面的方法设置，会将axios进行二次封装，这时候只需要在baseurl设置为'/api'即可，调用接口时直接写接口路径就行了

const httpInstance = axios.create({
	baseURL: '/api',
	timeout: 99999
})

线上环境配置nginx：

location ^~/api/ {
           proxy_pass http://xx.xx.xx.xx:8023/;//后端路径
        }

方法三：cors

这里就需要后端配合去设置Access-Control-Allow-Origin响应头允许跨域，前端不配置代理也能正确调用接口