vs2019 加 vue 前后端分离配置,解决跨域问题以及Session为null问题

第一步:首先在后端web.config中设置跨域设置

 <!--跨域设置-->
    <httpProtocol>
      <customHeaders>
        <!--响应类型 (值为逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法)-->
        <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
        <!--响应头设置(Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)-->
        <add name="Access-Control-Allow-Headers" value="*" />
        <!--如果设置 Access-Control-Allow-Origin:*,则允许所有域名的脚本访问该资源-->
        <add name="Access-Control-Allow-Origin" value="http://192.168.20.223:8080" />
        <add name="Access-Control-Allow-Credentials" value="true" />
        <!--<add name="Access-Control-Allow-Origin" value="http://domain1.com, http://domain2.com" />  设置允许跨域访问的网址-->
      </customHeaders>
    </httpProtocol>
    <validation validateIntegratedModeConfiguration="false" />

在Access-Control-Allow-Origin中的Value改成前端的访问ip+端口;

第二步:打开前端代码axios.js

let instance = axios.create({
  baseURL: process.env.API_HOST,
  headers: {
    // 'Access-Control-Allow-Credentials': true,
    //'Access-Control-Allow-Origin': 'http://192.168.20.223:8080'
  },
  timeout: 30000, // 请求超时时间
  withCredentials:true,
  crossDomain:true
});

添加withCredentials:true 和 crossDomain:true 这两个属性(如果是jquery请求,同样设置这两个属性即可)

第三步:打开前端代码config文件夹在dev.env.js中

'use strict'  // 开发环境配置
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_UPLOAD: '"http://47.114.115.154:8883/"', // 上传图纸(现场照片/视频)存放地址
  // API_HOST: '"http://47.114.115.154:8885/"'   // 其他接口地址
  API_HOST: '"http://192.168.20.223:50309/"'
})

对API_HOST设置后端本地访问路径

第四步:打开前端代码config文件夹在index.js中

const path = require('path')
module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static', // 指的是静态资源文件夹,默认“static”,
    assetsPublicPath: '/', // 指的是发布路径
    proxyTable: {
      '/api/': {
        target: process.env.API_HOST,
        changeOrigin: true,  // 是否跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    },

    // Various Dev Server settings
    host: '192.168.20.223', // 能被process.env.HOST覆盖吗
    port: 8080, // 可以被process.env覆盖。端口,如果端口正在使用,将确定一个空闲的端口
    autoOpenBrowser: true, // 是否自动打开浏览器
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, /

设置是否跨域changeOrigin为true

第五步:正式发布时只需要将后端web.config改成前端发布ip加端口即可

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值