Vue+.net core 7 api跨域

nginx的不说，直接说在项目中配置的。

重点：前端要配代理，后端要设置返回的头文件信息。双管齐下

1、前端在项目中的vue.config.js配置中进行设置

module.exports = {
  publicPath: '/',
  outputDir: 'dist', //  发布输入文件
  assetsDir: 'static', // 需要/demo目录下放打包后的html文件，其他css、js什么的，放到/static目录下
  lintOnSave: process.env.NODE_ENV === 'development', // 是否在保存的时候检查 只有开发模式检查
  productionSourceMap: false, // webpack 打包生成map
  devServer: { // webpack 开发环境
    port: port, // 默认端口
    open: true, // 开发调试是否自动打开
    overlay: { // 出现编译器错误或警告时，在浏览器中显示全屏覆盖。除了设置为 Boolean 类型之外，我们还可以传入对象进行配置。
      warnings: false,
      errors: true
    },
    proxy: { // 代理
      '/api': { // 请求的地址中如果是/api/login中的api 就根据其中的/api匹配,最终地址:target+请求的控制器。如果设置了pathRewrite，那么执行替换规则后更换成 target中的地址,最终地址:pathRewrite执行+target+请求的控制器，如:http://localhost:9600/login
        target: 'http://localhost:9600/', // 我的api全路径是http://localhost:9600/api/login
        changeOrigin: true // 是否需要跨域
        // secure:true, //接受对方是https的接口
        // pathRewrite: {
        //   '^api': ''
        // }
      }
    }
  }
}

2、如果有封装Request需设置

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.withCredentials = false // 跨域请求是否提供凭据信息是否需要凭据。
const service = axios.create({
    //这里直接注释，不然以该地址优先请求，则代理无效
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

3、后端用的.net core 7 api，需要设置返回的Response头信息，在Program中

// 配置返回允许跨域的头部信息
string CORS1 = "mycors";//名字可以随意取
// 配置服务
builder.Services.AddCors(options =>
{
    options.AddPolicy(CORS1,
    builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()
    );
});
app.UseCors(CORS1);