vue配置proxy（代理服务器）跨域

加粗样式### 什么是跨域?
域名、协议、ip地址、端口任何一个不-一样， 就会出现跨域问题

解决跨域?

1. jsonp --使用script的src发送 只能get请求

jsonp 前端代码

<!-- 发送请求给abc.php -->|
<!-- jsonp 就是script src -->
<script src="http:/ /www .baidu. com/ abc . php"></script>

2. cors后台设置允许跨域需要后台 设置允许跨域 所有后台语言都可以设置

这里是后端是设置

<?php
// 设置头部
header( ' Access - Control -Allow-Origin:*'); // *代表允许任何网址请求
header( ' Access-Control-Allow-Methods :POST , GET, OPTIONS,DELETE'); //请求方式
echo ' 成功请求
?>

3. 服务器代理

服务器代理原理图

配置代理

现在前端vue框架是可以自己设置服务器代理的proxy
配置就行
vue在vue.config.js可以配置重写webpack

**以默认vue http:// localhost:8080 请求http://122.51.238.153 为例

.vue文件中发送请求

async  getAll(){
//
http:// localhost :8080/
//请求http://122.51.238.153/ getok . php 
**let res=await this. $http. get("http://122.51.238.15"）  //请求会出现跨域问题**
let res=await this. $http. get("http://api/getok.php"） //请求不会出现跨域问题
console. log(' 
res',res)
I
// let res=await this . $http . get("/api/ getok . php") 
// console.log('res' ,res)
},

vue. config.js配置代理

下面的配置就是vue脚手架帮你开启了一个隐藏的服 务器

// vue. config.js
//这些配置大家复制就行基本都是写死的

//这个配置就是vue脚手架帮你开启了一个隐藏的服 务器
//帮你转发了

module .exports = {
//修改的配置配置proxy 服务器代理
devServer: {
proxy: {

// 如果你的地址以/api 开头他就会请求到http://122.51.238.153
// "/api/ getok . php" => // http://122.51.238.153/ getok . php

/api': {
target:' http:/ /122.51.238.153',
change0rigin: true, 
// WS: true,
pathRewrite: {
'^/api':”//I请求的时候/api就会替换成|
                  }
             }
          }
      }